Wednesday, January 24, 2007

Linda's How-Do-I Series? How Do I Add A Scrolling Banner?

I'm sure you're seen scrolling banners and multiple pictures scrolling all in a row across the tops of blogs and websites before. Some are standard banners sizes (468x60), some are pictures, and some are a combination of mulitple product pictures. Some are clickable back to the website and some aren't.

Well, if you have seen these and if you're wondering what the coding is to do that - here's how:

Let's say that I want one of my standard size banners (468x60) which I've named Epatterns468x60.jpg to scroll across the top of my Linda's Blog and be CLICKABLE back to my Linda Walsh Originals E-Patterns website.

Here's the HTML code that would make that happen (minus the ***'s that are there so the HTML code is visible in this article):

<***marquee scrollamount="5" width="100%"><***a href="http://lindawalshoriginalsepatterns.com" target="_blank"><***img alt="" src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns468x60.jpg" border="0" /><***/a><***/marquee>

and that would produce this:



The scrollamount # above determines how fast the banner or picture will scroll across your website or blog. For example, if I were to change the scrollamount above from a 5 to a 1 the banner would be scrolling very slowly across the page. If I were to change the scrollamount above from a 5 to a 10 the banner would be flying across the page.

The width amount above sets where the banner or picture will start from. To have it start in the right hand side of your blog or website you would leave it at "100". If you wanted it to start in the middle of your blog or website you would change the width from "100" to "50".

If you wanted to use the HTML code above for your website or blog to make one of your banners clickable back to your website or blog then the HTML code would be as follows (minus the ***'s that are there so the HTML code is visible in this article):

<***marquee scrollamount="5" width="100%"><***a href="http://YOURWEBSITEURL"><***img src="YOURBANNERIMAGEURL"><***/a><***marquee>

Any banner, picture, or combination of several pictures can be used for the scrolling. In other words, you can make it several scrolling banners or pictures in a row and here's how:

Let's say I want to have 4 of my button banners CLICKABLE to their websites or blogs and scrolling in a row across my website or blog. Here's the HTML code to make that happen (minus the ***'s that are there so the HTML code is visible in this article):

<***marquee scrollamount="3" width="100%"><***a href="http://YOURWEBSITE#1URL" target="_blank"><***img alt="" src="http://YOURWEBSITE#1BUTTONURL" border="0" /><***/a><***a href="http://YOURWEBSITE#2URL" target="_blank"><***img alt="" src="http://YOURWEBSITE#2BUTTONURL" border="0" /><***/a><***a href="http://YOURWEBSITE#3URL" target="_blank"><***img alt="" src="http://YOURWEBSITE#3BUTTONURL" border="0" /><***/a><***a href="http://YOURWEBSITE#4URL" target="_blank"><***img alt="" src="http://YOURWEBSITE#4BUTTONURL" border="0" /><***/a><***/marquee>

and that would produce this:



I hope this helps explain how you, too, can get a scrolling banner or a scrolling sequence of pictures across your website or blog.



Posted by Linda Walsh Originals- "Doll Patterns for Grown-up Girls!"

5 comments:

Renee' said...

where do you put the code in at?

Linda Walsh said...

Hi, Renee:

There are two ways. You add the html code to the template of your blog where you want the banner to be. Or,if you are adding it to the sidebar of your blog choose the HTML module from the layout and add the html code in the pop-up window box. Then just place the html module on the sidebar where you want the banner to scroll. Hope this helps. Linda

Renee' said...

I was trying to add the buttons like to bottom of blog and scroll :)

Linda Walsh said...

Hi, Renee:

I would add it to the footnote end of the blog just before the attrition module. Just go to your dashboard. Select layout. Scroll down to the bottom and click on one of the "Add a gadget" links. Choose the HTML module from the pop-up window. Add your html scrolling banner code to the html module and save. Then go to the layout window and move the html module to a space just above the attrition module so it will scroll the width of your blog. Hope this helps.

Linda

Renee' said...

:) Thank you for the help :)

Post a Comment