How to Add - Recent Comments widget to Blogger?

Recent Comments widget is very important in any blog for its success. This widget will display all the recent comments (some selected customized number of recent comments) of the blog. This widget will give the first impression to the blog visitor from the comments/feedback that the blog has from its visitors and will boosts its content value. More valuable comments the blog has, the more valuable the content will be as per the visitor’s perspective. So it’s always a good idea to add Recent Comments widget to your blog. In this post, I will explain the simplest way to add such a recent comments widget to blogger blog using Google FEEDBURNER.

Follow the below step by step approach to add Recent Comments widget to your blog.

---

1. Login to Google Feedburner Account. In case you don’t have an account, sign up for a free account.

Login this link: www.feedburner.com

2. Insert the Comment Feed URL inside the Feedburner box displayed on the home page of your Google Feedburner Account. The Comment Feed URL for a blogger’s blog looks like the one mentioned below.

http://YOUR-BLOGGER-BLOG-NAME-HERE/feeds/comments/default

Replace your blog name in “YOUR-BLOGGER-BLOG-NAME-HERE”

3. Click “Next” to go to the next page as shown below.

4. Click “Next” to go to next page which will complete Step 1 of 2.

5. Step1 is completed and need to complete Step2 by clicking “Next” as highlighted above.

6. Do not check any check boxes highlighted in the above screen print. Click “Next” to finish the burn process of the recent comments feed required.

7. Now the feed is ready to use in your blog. Do not click any of the options or links available on this page except “Publicize” to get the HTML code for the burned feed.

8. Select “BuzzBoost” from the list of services available as shown below. This will provide the HTML code for the recent comments feed that you have burned by the above process.

9. Provide your customized feed setting for all those highlighted.

10. Click “Activate” to activate the recent comments feed.

Copy the HTML code generated for the recent comments feed and add this to your blog as a widget by following the below approach.

• Go to: Dashboard –> Layout –> Add Gadget –> Select “HTML/JavaScript”
• Copy the HTML code and save the gadget. Move the gadget on the your blog Layout as required.
• Save the Blog Layout Arrangements.
• View blog to see the recent comments widget added to your blog. If the widget has no comments displayed, do not worry as it means your blog has no comments as of now. In that case try giving some comments to few of your posts and see if widget displays the comments.

 

It’s Done Guys !! … Your blog should have the recent comments widget added and working fine by now.

Thank you for visiting this blog .…   Keep visiting for more interesting and useful blogger tricks.

 

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Grab a Favicon from any blog/website?

Favicon is an image icon that usually used to represent a brand of any online blog/website. The word FAVICON is a combination of two words FAVORITE and ICON. Favicon is also known as “Shortcut Icon”, “Website Icon” or “Bookmark Icon”. Browsers that support favicon will display the webpage’s favicon in the browser address bar next to the page’s title on the tab. The size of the favicon should always be 16x16 pixels.

A favicon can be any of the below mentioned image formats.

• ICO
• PNG
• GIF
• JPEG
• Animated GIFs

If you want to have a unique favorite icon to your blog/website, then you need to create your own FAVICON using any image or photo editing software. Most of the cases you end up creating favicon which is not that good as you are not a professional in creating such icons. But you see many websites online that use most attractive and beautiful favicons and you thought of downloading and using the same favicon to your blog/website too.

 

 

I will not encourage any of the readers to download and use the favicons of other websites to your blog/website. It is always good to have your own unique favicon to your blog/website which distinguish your blog/website from others. If you are not able to create your own favicon, then there is a way to download favicon from any other online website to your computer which can then be uploaded onto your blog/website.

---

Here is a simple way to grab favicon of any website by just replacing the website/domain name from the below sample code.

http://www.google.com/s2/favicons?domain=www.facebook.com

OR

http://www.google.com/s2/favicons?domain=facebook.com

Using any of the above links will give you the favicon used on www.facebook.com

You need to just download the favicon and use it on your blog/website.

---

Here are some more examples to get favicon of many other websites.

http://www.google.com/s2/favicons?domain=www.google.com => This will give google favicon

http://www.google.com/s2/favicons?domain=www.yahoo.com => This will give yahoo favicon

http://www.google.com/s2/favicons?domain=www.orkut.com => This will give orkut favicon

http://www.google.com/s2/favicons?domain=www.twitter.com => This will give twitter favicon

http://www.google.com/s2/favicons?domain=http://amazing-bloggertricks.blogspot.in=> This will give the favicon of my blogger’s blog “Amazing Blogger Tricks”

Similarly you can grab the favicon of any online blog/website by just replacing the website name highlighted above.

---

In this post, I have explained how to grab a favicon from any online blog/website. Please refer my other post on “How to Add a Favicon on Blogger” to know how to add the downloaded favicon to your blog.

 

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Add - Moving or Scrolling text/images/videos on Website or Blogger’s blog?

Many of us think of making posts interesting by adding some special effects to the text. We usually make the text BOLD, ITALIC, or HIGHLIGHT or make it a different colour to make the text more important to the blog post. In this post I will show you how to make some special effects to the text that we want to make it highlighted in the post by making the text move or scroll. To have this special effects to the text, we need to have the corresponding html tags added at the start and end of the text and should be included in HTML code of the website or blogger post.

Examples for Moving or Scrolling text on Websites or Blogger

---

1. Simple Moving/Scrolling text from Right to Left

This is simple moving text from Right to Left

Code for the above moving text effect is provided in the below textbox:

<marquee>This is moving text Moving Right to Left</marquee>

This simple moving text is a basic and default scrolling text that we can have it added anywhere required on the blog or website. This can be made more attractive by adding background colour attribute bgcolor to this html tag.

---

2. Scrolling text from Right to Left with Background colour

Use the below attribute to add background colour to the moving text.

bgcolor=”hexadecimal code of the colour”

This is moving text with Background Colour

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323">This is moving text with Background Colour </marquee>

Here we have added the background colour to the scrolling text. If the text is not clearly visible by adding the background colour, we have another attribute to change the text colour which will be explained in my next example.

---

3. Scrolling text from Right to Left with Background colour and text colour attributes

Use the below attribute to change the text colour of the scrolling text.

style="color:white

This is Scrolling Text With Background Colour and Text colour attributes

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;">This is Scrolling Text With Background Colour and Text colour attributes</marquee>

If you feel, the speed of scrolling is either speed or slow you have an attribute which can be used to reduce or increase the speed of scrolling text which will be explained in my next example.

---

4. Scrolling text with scrolling speed attribute

Use the below attribute to change the text scrolling speed.

scrollamount="Scrolling speed number”

NOTE: If the scrollamount =”0”, then the text stops moving/scrolling as the scrollamount is zero.

The default scrollamount is 6.

Scrolling Text with reduced scrolling speed

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" scrollamount="30">Scrolling Text with reduced scrolling speed</marquee>

Scrolling Text with increased scrolling speed

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" scrollamount="70">Scrolling Text with increased scrolling speed</marquee>

You can even make the text bold, italic and underline which will be explained in my next example.

---

5. Scrolling text with different text formats

Use the below tags to enclose the text to get the effects applied to the text.

<b> = Use this to make the text bold

<i> = Use this to make the text italic

<u> = Use this to make the text underlined

Scrolling BOLD Text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;"><b>Scrolling BOLD Text</b></marquee>

Scrolling ITALIC Text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;"><i>Scrolling ITALIC Text</i></marquee>

Scrolling UNDERLINED Text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;"><u>Scrolling UNDERLINED Text</u></marquee>

---

6. Scrolling text with different direction options

You can change the direction of the scrolling text by using the attribute “direction” as mentioned below.

direction=”direction option”

The direction attribute will explain the direction of the text to scroll. The direction option values that are available for scrolling text are: left, right, up, down

• direction='”left”  => Text scroll from Right to Left
• direction='”right” => Text scroll from Left to Right
• direction='”up” => Text scroll from Down to Up
• direction='”down” => Text scroll from Up to down

NOTE: The default direction for the scrolling text is left (i.e the text scroll from Right to Left).

Here are the examples and their code for different scrolling text direction options.

Right to Left Scrolling text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" direction="left">Right to Left Scrolling text</marquee>

Left to Right Scrolling text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" direction="right">Left to Right Scrolling text</marquee>

Down to Up Scrolling text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" direction="up">Down to Up Scrolling text</marquee>

Up to Down Scrolling text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" direction="down">Up to Down Scrolling text</marquee>

---

7. Changing behavior of the scrolling text (different from simple scrolling)

From the above examples, you will get to know how to create a scrolling text. You can also change the scrolling effect of the text to a completely different behavior using the attribute behavior as explained below.

behavior=”Text behavior option”

Different options available for text behavior are:

• behavior=”scroll” => Text will scroll
• behavior=”alternate” => Text will alternate
• behavior=”slide”  => Text will slide

NOTE: The default text behavior is scroll. Also keep in mind the spelling of the attribute you are using. It is behavior (used in American English) and not behaviour (used in British English).

Here are the examples and their code for different text behavior options.

Scrolling Text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" behavior="scroll">Scrolling Text</marquee>

Alternating Text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" behavior="alternate">Alternate Text</marquee>

Sliding Text

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" behavior="slide">Sliding Text</marquee>

---

8. How do we place Scrolling Links?

You can insert links in between the scrolling text or you can provide links in the form of scrolling text. This will be explained below with examples.

Each inserted link should have its corresponding html code that will be similar to the one I gave it here.

<a href=”link url”>Link display name</a>

The values of the highlighted values should be changed as per your link to be inserted in the scrolling text.

link url  => Should be replaced with actual URL or Address.

Link display name => Should be replaced with the name to be displayed for this link in scrolling text.

NOTE: If you want to insert more number of links next to each other, then separate them with pipe symbol “|” as shown in the below example. You are allowed to place as many links as you wish to insert in the scrolling text.

You can check the below examples for more understanding.

Google|Youtube|Facebook

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;"><a href="www.google.com">Google</a>|<a href="www.youtube.com">Youtube</a>|<a href="www.facebook.com">Facebook</a></marquee>

Google
Youtube
Facebook

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;"><a href="www.google.com">Google</a><br /><a href="www.youtube.com">Youtube</a><br /><a href="www.facebook.com">Facebook</a></marquee>,/textarea></p><P></P></div></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></BODY></HTML>

---

9. How do we place scrolling Images?

You can even insert images within the scrolling text or You can have scrolling images. Please follow my instructions below to make it happen on your blog or website.

Each inserted image should have its corresponding html code that will be similar to the one I gave it here.

<img src=”display image url”>

Here the image url should be the url or address of the image that has to be included in scrolling text.

Also, If you want to make the image a clickable link, then you should use the html code mentioned below for each clickable image link.

<a href=”link url”><img src=”display image url”></a>

Here, you need to replace the highlighted portion of the code with actual URLs or addresses.

You can check the below examples for more understanding.

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5AMBl82Z2EYwpdaF-A1JfuPQ8KpqJP4bJ1kzT7ABFLbWF08jOxB8FtIeU8Cej79lSza3H5dWXNwnJjKvywUHoFVO2LdpF1VTSPgpUAny_GKIoxuUtIAV_5kG3Ht2EyQkFuFqSfADG_TD/s1600/youtube.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8XaPY098mb4ofsm6jQwi4IK5AJ6FaU-R7m2ccr_c4MUEki6QKtouYI0dPMfXXJHL4BQ7S4BUF2_e5_H1caviPCikM2h0LqDjzVgnZmNtmZg8JgjJ43xsVMdI9svqnzczd2-Dy04bDEbV/s1600/facebook.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBW1p-9dm8y09Vov0SfQsg3iCH6J5_dsYDzpu8MWK6yeLkMScYlFGr3LjyCcV7GmQ_nqTq0e2AFhT4vEWSeSdu9L6OI83fRjUB0QDke_pUuIxP2EeQZu1ZyN2BvRFv0aG7a04pt3hM7Res/s1600/twitter.png"></marquee>

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;"><a href="www.youtube.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5AMBl82Z2EYwpdaF-A1JfuPQ8KpqJP4bJ1kzT7ABFLbWF08jOxB8FtIeU8Cej79lSza3H5dWXNwnJjKvywUHoFVO2LdpF1VTSPgpUAny_GKIoxuUtIAV_5kG3Ht2EyQkFuFqSfADG_TD/s1600/youtube.png"></a><a href="www.facebook.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8XaPY098mb4ofsm6jQwi4IK5AJ6FaU-R7m2ccr_c4MUEki6QKtouYI0dPMfXXJHL4BQ7S4BUF2_e5_H1caviPCikM2h0LqDjzVgnZmNtmZg8JgjJ43xsVMdI9svqnzczd2-Dy04bDEbV/s1600/facebook.png"></a><a href="www.twitter.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBW1p-9dm8y09Vov0SfQsg3iCH6J5_dsYDzpu8MWK6yeLkMScYlFGr3LjyCcV7GmQ_nqTq0e2AFhT4vEWSeSdu9L6OI83fRjUB0QDke_pUuIxP2EeQZu1ZyN2BvRFv0aG7a04pt3hM7Res/s1600/twitter.png"></a></marquee>

---

10. How to add Hover effect to scrolling text, links or images?

Most of the popular websites have hover effects for the scrolling text, links or images with stop scrolling while the cursor is placed over the scrolling text and the scrolling continues by taking the cursor out of the scrolling text. This effect is very useful to make the scrolling text readable by the visitors when they want to check the content in the scrolling text.

The below attributes will help us adding the hover effects to the scrolling text, links and images we have added from my previous examples.

ommouseover=”this.stop()” => This makes the scrolling text stop when the cursor is placed over it.

ommouseout=”this.stop()” => This makes the scrolling text start scrolling when the cursor is out of it.

You can check the below examples for more understanding.

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" onmouseover="this.stop()" onmouseout="this.start()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5AMBl82Z2EYwpdaF-A1JfuPQ8KpqJP4bJ1kzT7ABFLbWF08jOxB8FtIeU8Cej79lSza3H5dWXNwnJjKvywUHoFVO2LdpF1VTSPgpUAny_GKIoxuUtIAV_5kG3Ht2EyQkFuFqSfADG_TD/s1600/youtube.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8XaPY098mb4ofsm6jQwi4IK5AJ6FaU-R7m2ccr_c4MUEki6QKtouYI0dPMfXXJHL4BQ7S4BUF2_e5_H1caviPCikM2h0LqDjzVgnZmNtmZg8JgjJ43xsVMdI9svqnzczd2-Dy04bDEbV/s1600/facebook.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBW1p-9dm8y09Vov0SfQsg3iCH6J5_dsYDzpu8MWK6yeLkMScYlFGr3LjyCcV7GmQ_nqTq0e2AFhT4vEWSeSdu9L6OI83fRjUB0QDke_pUuIxP2EeQZu1ZyN2BvRFv0aG7a04pt3hM7Res/s1600/twitter.png"></marquee>

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" onmouseover="this.stop()" onmouseout="this.start()"><a href="www.youtube.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5AMBl82Z2EYwpdaF-A1JfuPQ8KpqJP4bJ1kzT7ABFLbWF08jOxB8FtIeU8Cej79lSza3H5dWXNwnJjKvywUHoFVO2LdpF1VTSPgpUAny_GKIoxuUtIAV_5kG3Ht2EyQkFuFqSfADG_TD/s1600/youtube.png"></a><a href="www.facebook.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8XaPY098mb4ofsm6jQwi4IK5AJ6FaU-R7m2ccr_c4MUEki6QKtouYI0dPMfXXJHL4BQ7S4BUF2_e5_H1caviPCikM2h0LqDjzVgnZmNtmZg8JgjJ43xsVMdI9svqnzczd2-Dy04bDEbV/s1600/facebook.png"></a><a href="www.twitter.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBW1p-9dm8y09Vov0SfQsg3iCH6J5_dsYDzpu8MWK6yeLkMScYlFGr3LjyCcV7GmQ_nqTq0e2AFhT4vEWSeSdu9L6OI83fRjUB0QDke_pUuIxP2EeQZu1ZyN2BvRFv0aG7a04pt3hM7Res/s1600/twitter.png"></a></marquee>

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" onmouseover="this.stop()" onmouseout="this.start()"><a href="www.youtube.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5AMBl82Z2EYwpdaF-A1JfuPQ8KpqJP4bJ1kzT7ABFLbWF08jOxB8FtIeU8Cej79lSza3H5dWXNwnJjKvywUHoFVO2LdpF1VTSPgpUAny_GKIoxuUtIAV_5kG3Ht2EyQkFuFqSfADG_TD/s1600/youtube.png"></a><br /><a href="www.facebook.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8XaPY098mb4ofsm6jQwi4IK5AJ6FaU-R7m2ccr_c4MUEki6QKtouYI0dPMfXXJHL4BQ7S4BUF2_e5_H1caviPCikM2h0LqDjzVgnZmNtmZg8JgjJ43xsVMdI9svqnzczd2-Dy04bDEbV/s1600/facebook.png"></a><br /><a href="www.twitter.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBW1p-9dm8y09Vov0SfQsg3iCH6J5_dsYDzpu8MWK6yeLkMScYlFGr3LjyCcV7GmQ_nqTq0e2AFhT4vEWSeSdu9L6OI83fRjUB0QDke_pUuIxP2EeQZu1ZyN2BvRFv0aG7a04pt3hM7Res/s1600/twitter.png"></a></marquee>

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" style="color:white;" direction="up" onmouseover="this.stop()" onmouseout="this.start()"><a href="www.youtube.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5AMBl82Z2EYwpdaF-A1JfuPQ8KpqJP4bJ1kzT7ABFLbWF08jOxB8FtIeU8Cej79lSza3H5dWXNwnJjKvywUHoFVO2LdpF1VTSPgpUAny_GKIoxuUtIAV_5kG3Ht2EyQkFuFqSfADG_TD/s1600/youtube.png"></a><br /><a href="www.facebook.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8XaPY098mb4ofsm6jQwi4IK5AJ6FaU-R7m2ccr_c4MUEki6QKtouYI0dPMfXXJHL4BQ7S4BUF2_e5_H1caviPCikM2h0LqDjzVgnZmNtmZg8JgjJ43xsVMdI9svqnzczd2-Dy04bDEbV/s1600/facebook.png"></a><br /><a href="www.twitter.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBW1p-9dm8y09Vov0SfQsg3iCH6J5_dsYDzpu8MWK6yeLkMScYlFGr3LjyCcV7GmQ_nqTq0e2AFhT4vEWSeSdu9L6OI83fRjUB0QDke_pUuIxP2EeQZu1ZyN2BvRFv0aG7a04pt3hM7Res/s1600/twitter.png"></a></marquee>

---

11. Can we add videos in the same fashion as scrolling videos on blog or website?

My answer for this questions is yes. You can always add any number of videos and make it a scrolling videos in the same way that we have done for the scrolling images in the examples explained above. The only difference is the html code that has to be used for each video to be added to the list of scrolling videos.

Best way to embed videos in the html is by using the tag <iframe>.

Each inserted video should have its corresponding html code that will be similar to the one I gave it here.

<iframe width=”200” height=”100” src=”source video url” frameboarder=”0” allowfullscreen></iframe>

You need to change or update the the highlighted values in the above html code as per your blog or website requirement.

• width => This takes the value video frame width
• height => This takes the value for video frame height
• src => This takes the URL of the source video
• frameboarder => This takes the value for frame boarder. You can give some value to this attribute and see what happens to the frame boarder.
• allowfullscreen => This gives FULL SCREEN option to the video added to the frame

Let me take you through some examples which would make you understand better.

I have a list of my videos from my youtube channel and their iframe html codes are mentioned below. I can embed these iframe tags within the scrolling effect tag <marquee> as explained below.

My youtube videos

<iframe width="200" height="100" src="//www.youtube.com/embed/yR1iu-ogdhE" frameborder="0" allowfullscreen></iframe>

<iframe width="200" height="100" src="//www.youtube.com/embed/Q4YLwF-ZDRY" frameborder="0" allowfullscreen></iframe>

<iframe width="200" height="100" src="//www.youtube.com/embed/FyZnO8fVrEM" frameborder="0" allowfullscreen></iframe>

Embed the above source videos iframe tags within the marquee tag as shown below.

<marquee bgcolor="#00D323" direction="left">Source videos iframe tags</marquee>

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00D323" direction="left"><iframe width="200" height="100" src="//www.youtube.com/embed/yR1iu-ogdhE" frameborder="0" allowfullscreen></iframe> <iframe width="200" height="100" src="//www.youtube.com/embed/Q4YLwF-ZDRY" frameborder="0" allowfullscreen></iframe> <iframe width="200" height="100" src="//www.youtube.com/embed/FyZnO8fVrEM" frameborder="0" allowfullscreen></iframe></marquee>

Video 1:
Video 2:
Video 3:

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00d323">Video 1: <iframe height="100" src="//www.youtube.com/embed/yR1iu-ogdhE" frameborder="0" width="200" allowfullscreen="allowfullscreen"></iframe><br />Video 2: <iframe height="100" src="//www.youtube.com/embed/Q4YLwF-ZDRY" frameborder="0" width="200" allowfullscreen="allowfullscreen"></iframe><br />Video 3: <iframe height="100" src="//www.youtube.com/embed/FyZnO8fVrEM" frameborder="0" width="200" allowfullscreen="allowfullscreen"></iframe></marquee>

Video 1:
Video 2:
Video 3:

Code for the above moving text effect is provided in the below textbox:

<marquee bgcolor="#00d323" direction="up">Video 1: <iframe height="100" src="//www.youtube.com/embed/yR1iu-ogdhE" frameborder="0" width="200" allowfullscreen="allowfullscreen"></iframe><br />Video 2: <iframe height="100" src="//www.youtube.com/embed/Q4YLwF-ZDRY" frameborder="0" width="200" allowfullscreen="allowfullscreen"></iframe><br />Video 3: <iframe height="100" src="//www.youtube.com/embed/FyZnO8fVrEM" frameborder="0" width="200" allowfullscreen="allowfullscreen"></iframe></marquee>

---

12. How to we add these effects to your blog or website?

With all the above examples, you are now familiar with the creation of html code for any type of scrolling text, links and images. And by now you should be having the below two questions by now.

• How do we add these scrolling effects to a blog post or website content area?
• How do we add these scrolling effects to a blog or website as a widget?

Let me answer the above questions in a simple and straight forward.

1. How do we add these scrolling effects to a blog post or website content area?

>>You can use the html code for the scrolling effect required in blog post or website content area anywhere, any number of times only in the HTML view (i.e before using the html code, make sure you are in HTML view).

2. How do we add these scrolling effects to a blog or website as a widget?

>>You can add the scrolling effect text, links, images, clickable images, your social networking links or anything by adding the same html code to your blog or website as a HTML gadget/widget. Follow the below navigational steps to add a HTML gadget to blogger.

Go to: Blogger Dashboard –> Layout –> Click on “Add a Gadget” –> Select HTML/JavaScript –> Paste the Scrolling effect html code in content area –> Save the Gadget

 

If required, you can move the gadget anywhere on your blog template by just dragging it.

---

 

That’s all I have for the Scrolling effect for Text, Images and Videos.

 

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Add - Customized Hover effect Textbox area in blogger posts?

Creating a blog with nice looking and user friendly posts is very much required. In some cases we need to use textbox areas if we are providing some code/data on the blog posts which could be copied and pasted by the blog visitor. Using such textbox in the posts make them beautiful and user friendly.
The textbox areas usage makes the blog formatted as the data that can be copied is provided in textbox area. This also avoids the visitor task of copying the content using right click (Select the content to be copied -> Right click and select "Copy").

Let us see the process of adding a textbox area in blogger posts.

---

1. Open up the blog post in HTML view.

2. Now add the tags textbox start and end tags to the post text that we need to have it in a textbox.

<textarea>Write Your Textbox Text Here</textarea>

3. Publish the post and view the published post on the blog to see the the textbox area with the text included.

The textbox area looks like the one below.

The textbox area added is a default textbox area and its not worthy enough adding a default, usual or a normal looking textbox area. So let me explain you how we can make this textbox area more beautiful and attractive.

How to make the textbox area attractive?

---

Adding CSS code to the blog template with help us making the textbox area more attractive with your customized settings or adjustments for the below options.

• Textbox Height
• Textbox Width
• Textbox Background Colour or Image
• Textbox Border Style and Colour
• Font style, size and colour
• Hover effects to the textbox area

You can use the below textbox area CSS code and can customize the to match the textbox area to your blog template’s style and colour.

textarea { background: #FFFFFF; width: 500px; height: 150px; overflow: auto; border: 2px dotted #00D323; font: 12px arial; color: #888; padding: 5px; margin: 0; } textarea:hover { color: #009DFF; border: 2px solid #00FFF7; }

Let me explain the process of adding the textbox area CSS code to the blog template.

CSS code can be added to to your blog template by any of the two ways mentioned below.

1. Go to: Dashboard –> Template –> Edit HTML –> Search for the code ]]></b:skin>

>>>Add CSS code just above the code ]]></b:skin> in blog Template HTML code.

OR

2. Go to: Dashboard –> Layout –> Template Designer –> Advanced –> Add CSS

>>>Add CSS code in the code area provided against “Add CSS”

 

NOTE: Once the CSS code is added to your blog template HTML code, all the textbox areas on the blog with be converted according to the customized CSS code added. And also, all the textbox area created here after on your blog posts will be according to the new customized CSS code added to your blog.

 

Yes Guys! … You have successfully added CSS code to customize the textbox area on your blog.

Example of Textbox area

This is the text included in textbox. The scrolling will also be displayed if we have text that extends to more than two lines with in the textbox.

 

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Upload - Beautiful Background Patterns to Blogger?

Do you want to apply beautiful background to your blog? Do you want to make your blog look beautiful with the nice looking background? Then you should upload a cool background pattern onto your blog. In this tutorial we will see the process of adding a beautiful background using the background patterns available online. I would recommend PATTERNCOOLER to download nice background patterns online. This is one of the online website that provides free background patterns.

Let us see the process of adding a beautiful background pattern to blogger blog.

---

Step 1: Download the required background pattern from PATTERNCOOLER. (or search for background patterns on google which give you more options or websites that provide free background patterns).

1. Go to PATTERNCOOLER
2. Download any interesting pattern from the thousands of patterns available on PATTERNCOOLER using the download option highlighted below.

Now the background pattern is saved on our local machine hard disk. Now we need to upload the downloaded pattern onto the blogger blog as background.

---

Step 2: Upload the downloaded pattern as background image for blogger blog.

1. Upload the downloaded pattern onto any of the image sharing websites or any blog that you use a database for all your images and get the image URL after upload. If you do not know how to upload onto image sharing websites, then just post the pattern in any of you blog posts and get its URL.

The image location/URL looks like the one below.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsT0EHviaVwkwG1doLykQl_iQImngeScTnU4JPhOGJB8J5k9s9WPh8Cnbc9fXHD5XxdDHYNFe6fsybn2Sn4a0Afu45fZQU48ABBeSn1uwPuerSEwD4qFC9BrrvAla7PWeJUMPDuiL6qij/s1600/pattern1.png

2. Go to: Dashboard -> Template -> Edit HTML

 

3. Search for the below code

body {

4. Within the body class, find the code for the background image which looks like the one mentioned below.

 

4. Replace the code for the background within the body class with the code mentioned below.
background-image: url(BACKGROUND PATTERN IMAGE URL);

Here, "BACKGROUND PATTERN IMAGE URL" should be replaced with actual background pattern URL.
So the code to be used should be the one mentioned below.
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsT0EHviaVwkwG1doLykQl_iQImngeScTnU4JPhOGJB8J5k9s9WPh8Cnbc9fXHD5XxdDHYNFe6fsybn2Sn4a0Afu45fZQU48ABBeSn1uwPuerSEwD4qFC9BrrvAla7PWeJUMPDuiL6qij/s1600/pattern1.png);

 

5. Save Template and view blog to see the new background pattern added to the blog.

 

It's done! You have successfully uploaded a background pattern as your blog’s background image.

---

 

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Add - Special effects to the images?

Using normal images makes the blog routine and boring for the blog visitors. In order to make the blog attractive and user friendly we need to have some beautiful images with special effects. The blog should have images with special effects that could make the visitor to stay and go through the blog content.
The most attractive parts of any blog is the images posted on the blog.

So make sure the images posted have some special effects rather than the old boring normal images.
We can have the below special effects added to the images uploaded on to the blog.

• Stacked Polaroid effect
• Tilt and Shadow effect
• Oil paint effect
• Other effects

Let us see the process of adding the above special effects to the images on blog posts.

---

Step 1: Create or Download the images which we need to upload on to the blog.
Step 2: Add special effects to the images using www.drpic.com as explained below.
1. Go to website www.drpic.com

2. Upload the picture to which the special effects to the applied.

3. Click "Polaroid" and then select "Stack effect" and click "Apply" to see the changes to the uploaded image.

4. Then click "Save to Disk" to save the image to local machine.

Step 3: Now the special effects are added to the image and available on the local machine. You can upload this image having special effects to any online blog or website.
That’s it Guys! … the special effects are added to an image and uploaded on to a blog.

NOTE: We have many other options and effects available under "Modify Picture" options area on this website which could help you in modifying and adding effects to the image.
Examples: Here is an example of the image for which "Stacked Polaroid effect" is applied.


If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.