Blog Design Tips: How I made that slideshow header (and how you can too)

Happy Monday, bloggies!

I'd like to share with you the headache that was my weekend.  I spent about 4 hours trying to add a 'slider' function to my blog which would show a "best of" list of posts, and allow readers to see / click / love.   After massive amounts of trial and error, I was finally able to find a style I liked and (most importantly) a script that worked.

In order to do this at home, you will need to view, copy/paste (and make one minor tweak to) the code found here:



http://www.bloggertricksandtoolz.com/2011/01/how-to-add-cool-jquery-featured-post.html


You are going to want to copy and paste it just as you see it, with 3 major exceptions:
URL of link 1 HERE - This is where you enter the page you want the slide to redirect to.
URL of photo 3 HERE - This is the photo that will appear on the slide (host the image at picasa, photobucket, etc.)

Also, towards the top, you are going to want to add this code into it:

({effect: 'fade', animSpeed:500, pauseTime:3000,});

effect: 'fade', animSpeed:500, pauseTime:3000 - These adjust the speed of the slider, and the transition effects.

You can choose from the following transition effects:

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random (random seemed a bit glitchy to me, and is the default.  I'd recommend not using this.)
• slideInRight
• slideInLeft

The default size of this slider is 618px wide and 300px tall.  I formatted my images to fit this slider, and cannot figure out a proper way to increase/decrease the size, so try to contour your images to that approximate height.

Included in the text box is code for 5 images, but you can change that if needed.  You can copy/paste each of the lines with the link/picture code to include as many slides as you want.

Enjoy!  I know I will!