Friday, April 10, 2009

Scrolling Blog Buttons

Update: There are several comments below about problems with only the first 3 buttons scrolling and it starting over!! Well, I too ran into that problem when working on a blog makeover. Honestly I am not sure exactly what was causing the problem. I had to remove the widget and reinstall the code. It seemed to work! I am sorry I don't have a technical answer, I'd just say if you still running into this problem. Remove the widget and start again! If I figure out why it's doing this I'll let you know!!

-----------Original Post----------------

I recently learned how to create a widget where all my favorite blog buttons can scroll through a smaller space on my sidebar therefore making it look less cluttered!

They scroll like this:










Here's a how YOU can make your blog buttons SCROLL too!!

1. Go into your layout page and click on Add a New Gadget

2. Choose HTML/Javascript

3. Add the following code in the text box:

<center><div class="textwidget"><marquee direction="up" width="200" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()" height="400" align="center"> THIS IS WHERE YOU ADD THE HTML CODES FOR YOUR FAVORITE BUTTONS! (You can add as many as you like!) </marquee></div>

The colors in red can be adjusted to fit the space on your sidebars.

The number 5 in yellow adjusts the speed of how quickly the buttons will scroll! The higher the number the faster they will GO!

4. Click save and Viola!!

Enjoy your scrolling buttons and a lot less clutter on your blog!

62 comments:

Unknown said...

I used this today! Thanks for the tutorial.

Unknown said...

Oh yeah, is there a way to leave a larger space in between each button?

Ryan Ashley Scott said...

I am loving this for a few things on my sidebar. Thanks!

Now... to find a spare minute to actually try it out... :)

Debra said...

I just responded (on my blog) to your comment that you left me and decided to leave a reply on your blog,as well. Just wanted to say thank you for your contribution to the subject of "comment etiquette." I guess I just need to decide what feels right for me. I'm still researching it though and will post what I find on my blog sometime tomorrow.

I'm so excited about your blog! I've been researching lots of blogger tips and tutorials and am in the process of creating a test blog to try more widgets etc.

I recently changed my blog to 3 columns by following instructions over at cutestblogontheblock.com and it worked perfectly, so then I helped a friend change hers also. I love learning new things and trying them out on my blog, but now it will be so much better,to have my test blog to try things out on.

Can't wait to check out more of your blog....I'm so excited!

Amy said...

I am going to try this tomorrow or this weekend to see how it works.

Christina - Rant Rave Roll said...

I love this, but I'm having a problem... I can only see the first few buttons. They scroll up from the bottom them stop when the first button gets to the top. Then it just starts all over again with the same few buttons. It never goes through all the buttons. I notice your "example" also does the same. Am I doing something wrong?

Pam said...

Thanks for posting this. I've often wonder how some bloggers got their buttons to scroll like that. I'm going to bookmark this for future reference and then check out all your other bloggy tips. So glad I found you!

Michele Mallory-Davidson said...

I love your blog!!! I cannot tell you how many people I have given your link to! I made a button the other day, and now I have 2 scrol boxes!! You are AWESOME!!!

Angie said...

Thank you! This was sooooo easy!

Roshni said...

I just used this and I added your buton to the list too!
Thanks a lot! I'm really wanting to have a blog makeover so I'll look to your blog for inspiration now!

Laura said...

Jen,

I love this - thank you for sharing with us!! I really like the new look of your blog too! Everything you do is amazing!! Oh and I LOVED the birdy on a branch you had on your other blog - if that's what you're going to do with your other one, I can't wait to see it when it's all done!! :) Oh, I just noticed your pink daisies freebie - SO, SO cute!! Do you think you do one for a 3 column blog?? ;-))

Gina @ MoneywiseMoms said...

What a great solution! I didn't know what to do with all the buttons I've collected.

B said...

I just found your blog, and love it. Have to go look around a little more, but had to say hi.

Unknown said...

THIS IS WHERE YOU ADD THE HTML CODES FOR YOUR FAVORITE BUTTONS! (You can add as many as you like!) So is this the blog address of those you want to add or only the html for the buttons? If it's only for the buttons is there a way to make a roll for your labels and blog list only?

Tammy said...

This is just what I've been lookin' for to declutter my sidebars! Thanks a bunch! And, of course, I'll be adding your button to my scroll!

Michele Mallory-Davidson said...

I left you a surprise on my new blog! Thanks for all of your wonderful tutorials and ideas!

Buckeroomama said...

Thanks for all the wonderful tips here!

I have the same issue as Christina (Apr 16 comment) --where the scroll goes through only the first 3 buttons and repeats the same first 3... Is there any way to get a continuous, looping roll? Or did I miss anything?

(Just added your button to my blog).

Jolanthe said...

I'm having the same problem as some of the other ladies with it only scrolling 3 of the blog buttons. Love the idea and would love to get it working too! :)

Jolanthe

Anonymous said...

Hey There
I have used this feature for my blog and it works like a dream! I have just mentioned you in a post. Thanks for an awesome widget:)

TheAtticGirl said...

Thank you Thank you Thank you! I have been searching everywhere for this! It worked! Yay!!!!

Anonymous said...

I have been searching everywhere for simple instructions on how to do this....THANK YOU!!!

Sandy said...

Thank you! This was so easy! :0)

Mandee said...

You are wonderful!!!
I'm following you now! Thanks so much!!! You are the only one that has been able to fix my problem! Thanks a ton!!! :)

Mandee said...

ok, now it's not working...grrrr...I'm confused!

Mandee said...

Thanks for commenting! I have tried everything, but it still is only showing 3 for me. I have asked others and a few people have said they can see more than 3, but most people say they can only see 3. Thanks again for the comment on my blog! You are so very kind. :)

Susie Jefferson said...

This has been tremendously helpful: thank you so much. I had the buttons listed under one another, but not scrolling. And now I have!

Here's another problem you might have a solution for:
lots of blogs say "Take this button". when what they actually mean is "Take this picture and load as a picture box, and copy my url and paste it in the address section of the picture box".

Any ideas on how to condense those? And scroll them?

The only solution I can think of is putting their buttons on my own photobucket account so I can generate the img address to write the code, so it can be scrolled per your instructions here. There must be an easier way!

Unknown said...

May I just say again, you are AWESOME! I wish I would have found you at the beginning of my blog overhaul because your instructions are by far the easiest to follow I've found. I'll be putting this blog in my "Blogs I Heart" post for next week :D

Shana said...

I just used this! I have been looking for an explanation that I could understand. Thank you, Thank you, thank you!! I just played around with the size & speed & I am in love, ha!!

Busted Kate said...

Just added this to my blog and it works great! Thank you so much! Following you now :-)

Nikki (Wicked Awesome Books) said...

Thanks!! This worked perfectly for me and now I have a ton more space on my blog.

-Nikki

Kristin said...

Thanks for the tutorial I am going to try this today!
Kristin
www.peapodcreations.blogspot.com

Emily's Family said...

Thank you so much for this. I have been trying to figure this out!

http://couponmommyof2.blogspot.com/

jerricaparr said...

Thanks so much for this.. I've put it to use in multiple places on my blog.
:)

NaVe said...

Wow awesome! Was wondering how to do this! Thank you! :)

Unknown said...

Thank you thank you so much! You explained it so well...I never thought I could do this myself!

Romina said...

Thank you for this post. You made a not-so-tech-savvy person like myself feel very competent. And, I really like how you provided graphics in your tutorial. I will definitely come back to this site for more tips.

Unknown said...

I've been looking everywhere for how to do this! Thanks SO much!!!
Ashley @ simplydesigning.blogspot.com

Hesses Madhouse said...

Yay! I've been searching all over for this information. Your's finally worked. Thanks so much for posting this!

Kimberly @shrinkingkimberwls said...

Thanks so much for the tute! My buttons look SO much better now!
-Kimberly

chie said...

finally!!! super thanks! you're so helpful, your blog is great! god bless.

Rebecca said...

This is great I just implimented the code on my blog ~ works great!! Thanks so much this frees up clutter on my blog :-)

a little bit of everything said...

I just found his info and it worked perfectly. It wasn't the first set of directions I tried but it IS the one that worked. Thank you for posting!

I do have one question. I have 3 boxes scrolling on screen at a time. How do I make it one box at a time?

Kimberly Walker said...

You are a life saver... thank you so much for this tutorial. You have been so much help when it comes to my blog... nice not having to google everything I wanted... everything I was looking for was already on your blog!
Keep up the awesome work and I'm definatly following your blog. Feel free to stop by and follow mine!

All the best,

Kim

http://amoroccan-acat-and-my-bigass.blogspot.com/

Java said...

Thank you so much! I added this today!

Julie Kieras said...

Thanks! I've been dying to add this so I can "declutter!" Plus I am hoping to one day have sponsors which will be great too! I appreciate the help with this!
http://ayearwithmomanddad.blogspot.com

asliceofsmithlife said...

Thank you for this tutorial! I just did a post on this and linked back to your post and of course I have your blog button on my new blog button scroll! Check it out here: http://asliceofsmithlife.blogspot.com/2010/07/how-to-make-blog-buttons-on-your.html

Thanks again!
Tracy
http://www.asliceofsmithlife.blogspot.com

Unknown said...

Thank You!!

Social Media Junkie said...

So happy I found your blog I have been trying to find this code for weeks.. Thanks so much for sharing :)

Aysha said...

I just had that happen to me this morning! only my first 3 would come!!Shall try out your version.. thanks

Julie Kieras said...

I'm trying to use this code and it makes the FIRST button scroll, but the 2nd button gets stuck way at the bottom behind my other widgets and never scrolls. Do you know why this might be? I've tried this NUMEROUS times!
Please help if you can!
jkrs01 @comcast.net

Rhe Christine said...

thank you so much for this! i have been looking for it, googled it and there you were! and your blog is wonderful! faithful follower here!

Bethany said...

Thank you so much for your tuts! They are a blessing. I am not very html savy and you make it easy.

If you have a chance could you take a look at my blog: www.yourheartmatterstome.blogspot.com . I am scrolling, but I have a lot of space between the loop and between the next item on my page. Do you have any suggestions?

Thanks!
Bethany
Oh and by the way, I added your button for Following the Footsteps to my blog list!

Unknown said...

Awesome! I just added this to my blog and it works perfect! Thanks so much!!
Alissia
Tips 4 Green

Autumn said...

thank you for the tutorial!

.autumn.

Unknown said...

Hi! I am loving your tutorials! Thank you! I was curious tho, my scroll is having a problem only showing the 1st 3 buttons, I tried to copy the codes I, had in the gadget delete it and start over like you said, but it is still doing it. I was curious if you have any updates to this or a fix? Thank you! if you want to email me my email is:
sleatherberry at gmail dot com

Ernee said...

Hi. I just wanted to say thanks. I used this code today!

Unknown said...

THANK YOU THANK YOU THANK YOU SO MUCH!

Georgia from Blogging Maniac @ 50!

gmissycat at yahoo dot com

Ms. K said...

Hi, thank you so much for sharing your knowledge. You taught me how to create a button with code. Now, I am trying to make the buttons I have grabbed scroll. I am only able to see two buttons scroll though, and I am wanting to place your button on my blog. I have tried it over and over like you suggested, but I am having no luck. Since it has been a while since this tutorial was posted, I wondered if you ever found a solution to why more than two buttons will not scroll...or maybe someone else who had that problem has figured it out? Ms. K www.teacherblogspot.com

WhyWeLoveGreen said...

Thank you! I really appreciate the free code! I used it on my site "Why We Love Green" http://whywelovegreen.blogspot.com without any problems.

Alyianna said...

Thank you soooo much! I used this on my blog!

LisaLisa said...

Thank you, Thank you soooo much! I needed one of these so bad. Thanks again!

{Grace} said...

so awesome!