It’s time for another Work Your Blog Wednesday! Today is all about adding a scrolling roll of pictures to your blog. You most commonly see these for blog buttons down the side of blogs, but they can also be a great way to display products from your store!
As a word of caution, this code doesn’t work across all browsers. I highly recommend Fire Fox and Safari for browsing the web.
To implement a blog roll, you’re going to need to know how to do 3 things.
1. Resize pictures
2. Upload pictures to Photobucket or another picture host.
3. Use a tiny bit of html code.
Resize Your Pictures
I work primarily in PhotoShop, so resizing pictures for me is a snap. If you don’t have similar software, you can resize your pictures on this resizer website for free. When we’re talking about the internet, we’re usually talking about pixel size. Most blog sidebars are around 200 pixels wide so that’s a good starting point.
Upload Your Pictures
Now that you have your pictures resized and saved on your computer, it’s time to get them on the internet. I use Photobucket, but there are other options out there too. After your pictures are in Photobucket, you need to copy the DIRECT LINK. You can get this by clicking on the picture itself to open it by itself in a new window. You can also hover over the picture and get the link from the little gear in the top right corner.
Another note about pictures– I would usually use the same size/shape of pictures (either square or rectangle), but for the purpose of today’s tutorial I didn’t take the time change all of my pictures over to make them match.
Write That Code!
Now it’s time to get to the html part. The good news is that you can copy/paste my code right into your sidebar and just customize it a little. You will need to add your own picture codes from Photobucket and your own product links from TeachersPayTeachers.
<center><marquee direction="up" width="200" scrollamount="4" height="350" align="center"
onmouseover="this.stop()" onmouseout="this.start()">
<a href="COPY YOUR TPT PRODUCT LINK HERE"><img src="COPY YOUR PHOTOBUCKET LINK HERE"></a>
</marquee></center>
That’s it! Honest. 🙂 You can also use this to put blog buttons down the side of your blog.
<center><marquee direction="up" width="200" scrollamount="4" height="350" align="center"
onmouseover="this.stop()" onmouseout="this.start()">
COPY/PASTE GRAB BUTTON CODES HERE
</marquee></center>
I have been learning so much from you! Thank you for sharing all of your tips. Is there a simple way to add the boxes/buttons to the sidebar of your blog?
My sidebar boxes are part of the Awesome, Inc. template on blogger! You can find it under template-customize on Blogger.
Thanks for the great tip!
-Lisa
Grade 4 Buzz
This is great, Christi! Thanks for sharing! I can't wait to try it! 🙂
~Erin
Mrs. Beattie's Classroom
I just started following you and LOVE Work Your Blog Wednesday! I can't wait to try to this. I need to go back and read your previous Wednesday posts to get more tips! Thanks for the great tutorial 🙂
Thank you!
Great tutorial! Thanks so much for sharing! 🙂
Lauren
The Sweetest Thing
Follow me on Bloglovin'!
Love it. Didn't know you could put scrolls in the blog post. Have to try this one. Thanks, Christi! Sara B.
Thank you so much for this fabulous tutorial!! I had great fun adding it to my blog – I'm loving your Wednesday posts! 🙂
Wendy
Teacher's Toolkit
Just what I was looking for! Thanks Christi!!
Valerie
I love your tutorials! They are so helpful!
I would love to see one on how to make the small social media buttons. I know how to make individual ones, but I don't know how to get the small ones that are side by side.
And one on how to customize the pages tabs at the top!
Thanks!
Jessica
Hanging Out in First!
This is going to be a great way to feature my freebies without having to scroll down the page forever! Thanks for sharing! 🙂
I have a couple of questions… When I try this code on my blog and hit "preview" to make sure it looks okay, I see the "onmouseover=" line right above the scrolling picture. What am I doing wrong?
Also, what do you do if you sell on both Teachers Pay Teachers and Teachers Notebook? Is there a way to add a pop-up caption to a picture where I could put "TpT | TN" and link each of the store's initials with the link to my product that is there? Or would I have to upload two pictures of each freebie, linking one to TpT and the other to TN? That might be confusing to readers, so I guess I'd have to distinguish between the two stores in all the pictures…?
Thanks again!
~ Candice from Innovate. Motivate. Educate.
Make sure the quotation marks and parenthesis are all intact. You would nee to separate scrollers. You could have one that's titled "TpT" and then copy the same one and name it "TN". You would just need to swap out the URLs the second time.
Thank you!