How To Create Scrolling Window for All the Widget Stuff

 Print Post    

You know that endless amount of widget content in the sidebars of your blog? Ever wish you could having a scrolling windows to hold some of it, like those four dozen blog badges?

Here’s a simple HTML marquee code that does that:

<div align=”center”><marquee onmouseover=”this.stop()” direction=”up” width=”125px” onmouseout=”this.start()” scrollamount=”3″ loop=”true” height=”400px”>YOUR HTML HERE</marquee></div>

Well that doesn’t help alot huh? Don’t know what to do next? Thought you would never ask.

First of all, don’t try to copy that code above. It’s specially coded to APPEAR like HTML. Why? Because if it was REAL HTML code, then your browser would try to make that code happen. Down below, I give you a place to copy the real code.

Next, the important part of that code is “YOUR HTML HERE”. The rest of the code creates a “marquee container” that holds whatever HTML or content you put into it. I cannot cover all the possible ways this could be used. I’ll give you an example of putting in a list of Blog Badges. However, you can put any type of content into it, so just experiment. If you mess something up, or can’t get it to work, you can always remove it.

To begin, go to your Layout In Blogger (I’ll describe this for Blogger, but you can use similar tools in WordPress or other blog platforms). In a sidebar, choose “Add a Gadget”. Then choose “HTML/Javascript”. Paste in the Marquee Code (provided at the end of this blog post).

Now you are ready to start adding your own content. Replace on the spot that says “YOUR HTML HERE”. So, if I wanted to add four blog badges, I would paste this HTML code and replace “YOUR HTML HERE”:

<a href=”http://adoptbellagrace.blogspot.com/” target=”_blank”><img border=”0″ alt=”" src=”http://www.brentriggs.com/blogbadges/loveshack.jpg”/></a>
<a href=”http://ferrickfamilypromise.blogspot.com/” target=”_blank”>
<img border=”0″ src=”http://www.brentriggs.com/blogbadges/bella.jpg”/> </a>
<a href=”http://4littlemen.blogspot.com” target=”_blank”><img border=”0″ alt=”" src=”http://www.brentriggs.com/blogbadges/britt.jpg”/></a>
<a href=”http://www.kellyskornerblog.com/ ” target=”_blank”><img border=”0″ src=”http://www.brentriggs.com/blogbadges/harper.jpg”/></a>

I colored each instance of badge code alternating colors so you can see all that it is just the same thing over and over with different link/image addresses. The changing attribute of the HTML image tag (“img”) is “src” (where is image you want to show?). The “img” tag is then surrounded by an “a” tag which is how you link the image to an address (the “href” attribute).

• So you have this basic HTML to create a linked image: <a><img /></a>
• The “img” tag gets the image to show, and the “a” tag links the image.
• The attributes inside each tag control the tag (ie, “src”, “href”)

Putting that code into the Marquee code (replacing “YOUR HTML HERE”) produces the scrolling badges you see up at the top of this post.

Confused? Don’t be. Once you get the hang of a little HTML, its pretty easy. Below is the code for the marquee, and then a 2nd sample where I’ve put in two blog badges. You can replace the links to the images and blogs, and easily change the to your own. If you want to add more badges, just duplicate one instance of the blog badge code as many times as you need.

Remember, you can put just about anything in the scrolling window as long as it looks good and fits in your sidebar. You can even use the scrolling marquee in a blog post like I’ve done here. You can change the width to fit whatever you want (change it to width=100% to fit whatever space you put it in).

Check out a real live use of this on a regular ole’ blog to prove its not just for technogeeks like me: http://adoptbellagrace.blogspot.com/ (lefthand column, down the page a little)

Here’s the marquee code:
<marquee onmouseover=”this.stop()” direction=”up” width=”125px” onmouseout=”this.start()” scrollamount=”3″ loop=”true” height=”400px”>YOUR HTML HERE</marquee>

Here’s the marquee code with two blog badges example:
<marquee onmouseover=”this.stop()” direction=”up” width=”125px” onmouseout=”this.start()” scrollamount=”3″ loop=”true” height=”400px”><a href=”http://adoptbellagrace.blogspot.com/” mce_href=”http://adoptbellagrace.blogspot.com/” target=”_blank”><img border=”0″ alt=”" src=”http://www.brentriggs.com/blogbadges/loveshack.jpg” mce_src=”http://www.brentriggs.com/blogbadges/loveshack.jpg” /></a><br /> <a href=”http://ferrickfamilypromise.blogspot.com/” mce_href=”http://ferrickfamilypromise.blogspot.com/” target=”_blank”><img border=”0″ src=”http://www.brentriggs.com/blogbadges/bella.jpg” mce_src=”http://www.brentriggs.com/blogbadges/bella.jpg” /></a></marquee>

UPDATE:

I was asked if this can go horizontal. Yep! Up, down, left or right. Here’s a sample of horizontal code:
<br /> <div align=”center”><marquee onmouseover=”this.stop()” direction=”right” width=”600px” onmouseout=”this.start()” scrollamount=”3″ loop=”true” height=”100px”>YOUR HTML HERE YOUR HTML HERE YOUR HTML HERE YOUR HTML HERE YOUR HTML HERE YOUR HTML HERE </marquee></div> <p>

And it looks like this:

I would be very grateful if you would share this with someone, or put it on one of the social sites:

 Print Post