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.

How to Add - Thumb Rating Widget to Blogger?

Is your blog post effective? Does your reader really like your post? Are they satisfied with the post content and get benefited? All these questions are very important for Blogging career and would help the bloggers to come up with good posts. Usually any blog template comes up with comments section which is used for feedback from the readers online. But not all the readers would like to write comments on blog posts. It would be better to add some simpler feedback option on blogger. This can be achieved by either adding Star Rating or Thumb Rating to your blog posts. Thumb Rating would help in identifying the number of blog post likes.I have explained the process of adding Star Rating to blogger in my previous post.
Rating Widget provides so many beautiful rating plugins. You can enjoy the power of Rating Widget's Rating System which makes the blog posts most beautiful. Thumb Rating is one among the plugins it provides.


Let us see the process of adding Thumb Rating widget to Bloggger.

---

1. Go to: http://rating-widget.com/
2. Select the available options mentioned below and click the button "</>Get Widget"

• Type = Thumbs
• Theme = Select your favorite theme from the list of themes
• Size = Size of the Thumb

3.  Click the button "Generate User-Key >>" and then enter Email id and Secure code and click "Submit" button.

4. Save User Key and User ID generated for future use.
Then click the button "Add to Blogger" highlighted below which would ask for which blog you want the star rating to be added (all the blogs corresponding to the Email id provided in the previous step will be displayed here to select any one of them).

5. Select the blog and click "Add Widget" which will redirect to the Blogger Layout page.

6. A HTML/JavaScript widget should get added to blogger as highlighted below.

7. Save and View blog to see the changes.


That’s it Guys! … Now you can see the Thumb Rating widget displayed for each blog post on your blog as displayed above.

NOTE: If you are not able to view the Thumb rating widget on your blog, then make the below changes to get it displayed on the blog.

• Go to: Dashboard –> Layout –> Click “Edit” link in Blog Posts area –> Check the checkbox against “Show Thumb Ratings” under Post Page Options

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.