The HTML code for scrolling Blogger banners

Written by loralei haylock Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
The HTML code for scrolling Blogger banners
HTML can be used to create a variety of effects, including scrolling text or images. (Comstock/Comstock/Getty Images)

HTML (HyperText Markup Language) is the programming language that underpins most of the sites on the web. Within the HTML language are various options for creating effects -- the marquee tag creates scrolling text or images and can be further customised to influence colours, scroll speed and direction. Unlike many other free web blogs, Blogger allows you to edit the HTML of your site, meaning you can create a scrolling banner; however, there are many applications of the code that can be used on other blog hosts.

Marquee tag

The basic tag you will be using to create the scrolling effect is: "<marquee></marquee>" Text placed between the marquee tags will scroll across the web page. It should be used with caution, as it can be confusing for the reader and distract from the other content on the web page.

Different marquee effects

You can influence direction and background colour by adding extra commands. For example: "<marquee direction="left" bgcolor="green">TEXT GOES HERE</>" would create a marquee that travels to the left with a green background. Use one of the seventeen HTML recognised colour names or use hex codes for more specific shades. You can also influence a marquee's behaviour. Add in behaviour="x" to the opening tag. Substitute "x" for "sliding" to create text that slides in then stops or "alternate" to create text that bounces from side to side. You can also affect the speed by adding in scrollamount="1". Increasing the numeric value increases the speed.

Advanced effects

Add images to your marquee by placing the HTML image code between the opening and closing tags instead of text e.g. "<marquee><img src="URL of image"/></marquee>". You can also add links to your marquee using the "<a href="link URL">Text to display link</a>" code. To pause your marquee when someone hovers their mouse cursor over it, add the onmouseover="this.stop()" command to the opening tag, followed by onmouseout="this.start()" to make it start again when the mouse leaves the marquee.

Scrolling banners on Blogger

On the Dashboard, select "Template" then click "Edit HTML". Find the header section, which starts with the code "<header>" and ends with the "</header>" closing tag. Immediately after the opening tag, add your opening marquee tag. Close the marquee tag immediately before the closing header tag. This will cause whatever you have placed as your blog header in the theme customisation options to scroll across the screen.

Other places to use the code

With your own website you have complete control over where you can put your scrolling banner. Both Wordpress and Blogger allow you to place gadgets or widgets on your theme in a variety of places. One of these widgets is HTML/Javascript (Blogger) or Text Box (Wordpress) that allows you to enter and display HTML commands. You can also use HTML in the content editor used to write and publish posts.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.