Monday, December 23, 2013

How to Add HTML Scrolling Text Bar on Blogger!


www.iTTimesbd.com - Your Ultimate IT Partner [Stay Connected For IT Related Tips and Tricks]

Scrolling or Moving text is codded in HTML as Marquee. This is such kind of text that moves, slide or scroll vertically, horizontally, top or bottom of a screen from one side to another side. Mostly the Marquee Text is used to show headlines and breaking new on website or television channel. Actually Marquee text is very useful gadget for the website or blogger owner. Because Marquee Text can make a site more beautiful and attractive. In this post I'm gonna share a simple HTML code by which you can easily add the above shown Marquee Text gadget in your site.


This Marquee Text bar is created by simple HTML code. So, you can customize the Text Bar as you want. And the most important advantage of this marquee text gadget is, you can place it anywhere you want on your site. If you place this Text bar at the top of your site then it can be used as news bar. The code that I am sharing can be used in any website. But this post is dedicated for the blogger who are blogging on Blogger.com platform, that why I am only showing how you can add this Marquee Text bar to your Blogger blog. Let's see the procedure.


Adding Moving Text on Blogger Blog:
  • First Sign into your Blogger Account and go to Dashboard.
  • Then click on the Layout option.
  • Now click Add a Gadget link where you want to place the gadget.
  • Then from the Gadgets list choose HTML/JavaScript.
  • Now Paste the following code inside the HTM/JavaScript content box.

      <!-- This Script is from www.iTTimesbd.com, Coded by:  Md. Asif Rabbi--> <div align="center"><font color="#020202" size="+3"><marquee bgcolor="#FBECEC"direction="left"loop="10" width="100%"><strong><a href="http://www.ittimesbd.com">www.iTTimesbd.com</a> - Your Ultimate IT Partner [Stay Connected For IT Related Tips and Tricks] </strong></marquee></font color="#020202"></div><font face="Arial"><a target="_blank" href="http://www.ittimesbd.com/"><span style="font-size: 7pt; text-decoration: none">Your Ultimate IT Partner</span></a></font>

      Customization:
      • Text Change: Replace the red text of the code with your text
      • Font color: Here in this code Font color is #020202. You can change the font color by changing the color code. Use this Color Code Generator.
      • Font Size: You can change the font size by increasing or decreasing the Font Size value "+3"  in the above code.
      • Background Color: Here in this code the background color is #FBECEC. You can change the font color by changing the color code. Use this Color Code Generator.
      • Direction: Text moving direction is LeftYou can also use right.
      • Text Loop: Here Loop value is 10. That means your text will be shown for 10 times. You can either increase or decrease the loop. But if you want the text to be shown for unlimited time then you should delete the loop="10" part from the code.
      • Text Width: Here text width is 100%, you can also change the width by changing the value.

      •  Finally click on Save button to complete the process.

      That's it, Now view your blog and you will see the Marquee Text Bar appearing on your blog.


      Stay with www.iTTimesbd.com for more IT related Post

      No comments:

      Post a Comment