Ads 468x60px

Subscribe:

6/6/11

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!
Please Share it! :)

34 witty retorts:

Lady Estrogen said...

Ahhhh - very nice.
That's not flash though - that's jquery! Did you give up on that? I can count on 1 hand how many times I've coded in flash in the past 6 months. sigh.

Lost.in.Idaho said...

Yeah, I gave up on flash. I was trying to do piecemaker since you can incorporate flash, movies and images, but it was superfail.

Still, even though I had to 'settle' for this slider, I still like the way it came out.

Bart said...

far to fancy for me :D

The Angry Lurker said...

Thanks for the info.

Colin Biano said...

i kind of like my blog the way it is, but thanks

Nom de Plume said...

Oh cool I'll bookmark that. MY blog is sort of plain still :(

MuteMath Fan (& news junkie too!) said...

Awesome, thanks for the tips to make our blogs look like pros!

Autumnforest said...

Sweets, you lost me on "slider" function. My mind is in the gutter today. Can't focus for shit, but I love the imagery that you spent 4 hours working on your slider function. Good for you, boy!

Lost.in.Idaho said...

@Autumnforest: And here I am, trying to share my slider function with the rest of the blogging community. Want to see how I work it? Let me show you how!

BigMike said...

Thanks for sharing you work with us mate, it is appreciated.

duffboi said...

Good to know. Thanks for sharing.

A Beer for the Shower said...

This is really good to know. I'm bookmarking this post for the future. Aside from that, coming to this page and seeing MORMONS VS DINOSAURS pop up instantly is just one of the greatest things ever.

Mynx said...

Ohhh last time I tried something that fancy, blogger broke lol.
Well done, it looks awesome

D4 said...

I'm really loving how it works on your blog. I don't know if I'd be comfortable with mine, but neh, I do like it.

Bunny Hill said...

this look like some good stuff, I will see how it look on my puny stuff

Zombie said...

hey now the new layout is kinda cool!!

Annabelle said...

Sweet of you to pass along the info.

I don't speak the techese myself, I'm also a terrible designer so my space is all basic freebie template. Its rookie hour over there.

Dandy.

lovebloggin said...

awesome info! thanks a lot!

Ken Benjes said...

Very nice! Can you tell us how to do the comment pop up box?

Lost.in.Idaho said...

@Ken: Um, for that, go to the 'settings' tab, look for 'comments' and you can change it there...

ScottD said...

looks good!

Neon said...

Excellent tip, thanks!

chika said...

Awesome info sir!

Dwija {House Unseen} said...

I think I've had too much wine to truly appreciate the awesome tutorial you've so kindly shared with us (and I mean that in the most sincere way...not the snarky way that most people would say those words in that order. When I drink, I talk...type?...even MORE than usual. I don't know if blogger has enough memory for this comment, in fact) but I DO want to say that I am diggin' the redesign something fierce.

That's dork talk for "it looks good!"

As you were.

Ally said...

Yes, you did an amazing job, but I could never even attempt it. Every time I make any design change I destroy my entire blog. I'm that talented.

FourthGradeNothing.com

Rob said...

Everything about this is awesome!

Astronomy Pirate said...

Mah brain. It looks nice, a quality thing to install on your blog. I dunno if it's something that would work so well with mine though.

Sean said...

Might do this soon. Thanks!

ed said...

i prefer to keep it simple but nice tips

Tomás Franco Ramos said...

heey you're from idahoo! The famous potatoes state! Im from Santago - Chile, and my girlfriend used to live in idaho, and used to work in the tamarack resort. She told me that tamarack broke a few years ago, but she heard is now back in the business. Is that true :D?

Nice to know someone from idaho!
i'll be following u

Byakuya said...

Ahhh I hate fiddling around with stuff like this, thanks for the tutorial.

It'll make the job much easier if I decide to use it in future =3

Melanie said...

I think I am going to stick with cooking.

mmmpieohyeah said...

wow nice! why didn't I come to your blog sooner!

Thank, Q said...

Thanks! I'm going to check it out.

Post a Comment

Comments are always appreciated. Sometimes they end up being better than the initial post! Come join in on the fun... (and remember, you can post anonymously)

And if you like the post, feel free to share! Stumble, Digg, Tweet, go bananas!