Have you noticed those fancy little scrolling bloggy buttons on other's sites? Well that is nothing but a simple HTML tag that is easy to use in an HTML/Javascript gadget. All you need to do is copy and paste some text...and have a little bit of understanding so you don't delete anything accidentally.
First off, let me show you what the bones of my gadget look like on Parajunkee.com
What we will be concerning ourselves with is the first couple of lines of text. The one that opens up with marquee.
Now you can copy and paste what I have, and use it, but if you want to edit it, and modify it to meet your needs, I'll explain how to do that.
First off here is the code:
Breaking it down the <marquee is telling your browser that this is going to scroll. You open the code with that tag.
The next information I have is telling the browser what to do with that marquee tag.
direction="up" - lets the browser know to go up. You can replace UP with RIGHT LEFT & DOWN
width="95%" - The default for the marquee is 100%, but this might cause some inconsistencies with your sidebar. A good rule of thumb is that I set my widths on most of my sidebar objects as either 98% or 95% just to give the appearance of alignment
onmouseover="this.stop()" - this is telling the marquee to stop when someone scrolls their mouse over one of the images. Excellent tag, because you don't want a reader chasing an image with their mouse. Defeats the purpose of the links.
scrollamount="5": this is an animation code. It controls the amount of movement ( between the displays that give the impression of animation. The amount is pixels. Experiment with numbers to see an effect.
onmouseout="this.start()" - This tells the marquee to start up again when the reader moves the mouse. Wouldn't want that marquee to stay stopped, right?
height="250" - This is the height in pixels. This is so you can have "off screen" images. If you don't have a height it will look like just a big moving block of images. This number is in pixels, experiment with sizes, what fits best on your sidebar.
align="left" - And finally I'm telling the browser to align this bad boy left. You can do RIGHT or CENTER also.
Now the rule of HTML is if you open something you have to close it. So remember at the end of all your images, you have to close it!
If you have just one image, like my PJD button (*wink *wink) this is what the total looks like:
Thanks very much for this!!! Ive been trying to figure out how to do it, check out my blogroll now! http://ijustwannasithereandread.blogspot.com
Thank you so much - I've been wanting to do this for a long time. I'm so excited it worked!!!
omg! this is awesome! I have been wanting to do this, thanks so much!
I am going to manually adjust the size of the buttons later when I have some extra time, but Im glad it works! :)
Thank you very much!!!
Help! :) I've been messing with this same code in a million different variations - and for some reason - I keep having the same thing happen: It only scrolls up like the first 2 buttons - and then it stops and you can't see the others. Do you have any suggestions? I have been googling for 2 days trying to figure out how to fix this!
Thanks so, so, so much for any help you can offer!
www.stanwoodplayschool.com
Thanks! Just did this on my blog and it worked! :D
Thank you so much! I did it! You are helpful! Blessings, Shonda
Hi Rachel, thanks for this tip, looks great. I only have 2 problems/questions:
1) even though I changed the scrollamount to 10 then 15, it stops at the 9th blog button, though I have 11. How could I fix this?
2) is it possible to change the speed of the scroll? I find it too fast and would like to slow it down a bit.
Thank you so much!
Stella
OMG i had been trying to figure out how to having a moving roll for all the blog buttons on my site and couldn't figure it out for the life of me. Read your post and Now I have one!! http://angiewith2.blogspot.com/
So excited! Thanks so much for taking the time to explain everything too because I understand it well e...nough to change thing if i needed to. I added your button to my blog roll too!Thank you thank you! Anyone else wants to know, I'm directing them here.
Hey I made a post about your great blog here. I'm so very greatful you posted this: http://angiewith2.blogspot.com/2010/06/how-to-make-rolling-widget-for-your.html
HI I am having issues with one thing! all my buttons are just SQUISHED under each other there is no gap at all which looks sooo untidy, what can i do?
@Kylie
Try using a p tag or a br / tag inbetween
My blog roll will not display properly or roll in IE. It works in Chrome. Do you have any suggestions to make it work across all web browers?
Just tried this and I'm having the same problem as Jacque .. only 2 of the buttons show up over and over again. I'd sure appreciate some help ...ldsmomof03ATyahooDOTcom.
btw, I love this feature of your blog and said so over at my blog. Thank you for sharing your wisdom.
Jinky is Reading
Thank-You Parajunkee aka Rachel, so very much for sharing your blog wisdom with your fellow bloggers. Ive been wanting to figure out how to add this feature to my blog for a while now and finally with your help I have now got a blogroll, it may only have your blog button in it at the moment but I look forward to adding more later, now that I know how too. Please come check it out when you have the time.
Natasha @ Paranormal Goddess Book Blog
This is awesome thanks for your help and wisdom yet again! And of course I made sure to put you right at the top!
Thank you so much for this post! I've been trying to figure this out forever, and couldn't find any site that actually produced results. Got it working now and my blog is so much neater - thanks!