Monday, May 30, 2011

How to add a picture marquee to your blog.

Hello Everyone!

Its way past time for another blog design tip... don't ya think?!


This time I am going to show you how to create a scrolling picture marquee for your sidebar.  This is a great option if you want to display a bunch of pictures without taking up a bunch of room.  Its super easy too.

First, you need upload the photos you want to use to photobucket.  (an account is free)  For the purpose of this demonstration, I only used one photo (repeated 3 times), but you can use as many as you'd like.


Just select what folder you want to upload it to and then browse and select your photos.  You can select multiple pictures at one time by holding down the CTRL button.


Then you want make sure your pictures will fit on the sidebar.  Click on each picture and when you hover with your mouse a tool bar will appear.  Hover  over resize and a drop down menu of sizes will appear.  I chose the 160 option, but pick whatever size will fit the best on your sidebar.


Then its time to add your gadget.  Open a new window to do this because we'll be coming back to photobucket in a minute.  Under design- page elements- click on add a gadget, then select HTML/ JavaScript.

Add the following code.


Now go back to photobucket and copy the direct link to your picture.


Replace the part of the code that says direct link with the code you just copied.  Only replace the text, leave the " " in place.  Your code should look like this.


I repeated the same code 3 times for this example, on yours each code will be linked to a different picture,and you can repeat that line as many time as you need to.

Click save and you will have a scrolling photo marquee.

If you want to take it one step farther and add text links to each picture, use this code instead.



Replace direct link  with the direct link code of your picture, the wed address  with the web address you want to link to,   (sorry about the typo there) and the text Link  with whatever text you want displayed.

Your code should look like this.



And there you have it!

You can see this in action HERE.

Oh, and one more thing, you can change the UP  to left, right, or down if you want. 

Have fun!  Hopefully that all made sense.  Let me know if you have any questions and I'll do my best to help.


4 comments:

Screaming Sardine said...

This is awesome!! Thanks so much for sharing this. I'm just getting back into html and have forgotten quite a lot. (The ol' if "ya don't use it, ya lose it" phenomenon).

Cheers,
Tracy Screaming Sardine

CraftCrave said...

Just a quick note to let you know that a link to this post will be placed on CraftCrave today [31 May 02:00am GMT]. Thanks, Maria

ritajoy said...

Oh, thanks for this! I'm a new blogger and love all the tips I can find! You explained it very well.

Nadia Syafira =) said...

Thanks :) such a helpful tutorial...Thanks once again !
Have a nice day !

LinkWithin

Related Posts with Thumbnails
Don't stop there! Click "older posts" to keep reading!