04 May 2010

Simple jQuery Featured Content Slider for Blogger Blog.

Advertisements

Some of the followers of this blog had asked about slider feature for blogger as seen on many wordpress blogs. As I search on net I found an easy one to install. With the help of Webdesignbooth I managed to create a simple slider for you.


Demo of Content Slider

Installation.

1. Go to Dashboard > Layout > Edit HTML. Download template for backup. Add following code just ABOVE ]]></b:skin>

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

2. Add following code ABOVE </head>

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;610px&quot;,
height: &quot;235px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>

Save your template.

3. Finally go to Page Elements > Add a Gadget > HTML/JAVA Script. And add following code to it.

<div class="jflow-content-slider">
<div id="slides">

<-! Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->

<-! Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->


<-! Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->

.
.
.
.
<!-- You can add as many slides as you want above this line -->
</div>

<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

It's Done.

Customization

Code 1. You can change the background colors in code 1 to suit your blog.

Code 2. First of all download http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js and upload it to google sites.


You can change width, height and duration speed.


Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:

<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>

Also you have to add

<span class="jFlowControl">4</span>
after
<span class="jFlowControl">3</span>
and so on for next slides.

Limitation: This slider may or may not work with custom domain.


Other Versions of Featured Content Slider

  1. Tabs based Featured Content Slider
  2. Content Slider with Read more link

Related Posts

37 comments

May 6, 2010 at 6:49 AM

Hi how did you get that rolling bar at right side,in which your blogs are rolling one by one? Wow that's really nice! Is it possible for me to make it in my blog? Thanks and good day :)

May 6, 2010 at 8:08 AM

I did all mentioned in the steps, but not successful :( please check my blog,

http://makechinesefood.blogspot.com/

what's wrong out there? Thanks

May 6, 2010 at 11:41 PM

HI inda zhao

Get rolling bar here

http://free-blogger-help.blogspot.com/2010/03/recent-posts-widget-new-version-with.html


Content Slider:

First do it with only three posts.

May 13, 2010 at 11:56 AM

Oops, I guess what I mean is that I want to do this in a single post on my blog. The html only works in a widget, but won't work if I put it in a post. Here's what I'm doing...http://beyondredandgreen.blogspot.com/2002/05/title-of-slide-text-of-slide-title-of.html

May 14, 2010 at 12:03 AM

You cant add it to post.

July 4, 2010 at 4:42 PM

Hey, how do i make the pictured clickable, url wise?

July 5, 2010 at 8:06 AM

@ Prince Arnold
Use code

<a href="Link of Post"><img alt="" src="IMAGE-LINK"/>

instead

<img alt="" src="IMAGE-LINK"/>

July 5, 2010 at 8:56 AM

thank sooo much. i love this website!! putting a link to this site on my footer

http://princearnoldblog.blogspot.com/

July 8, 2010 at 8:17 PM

another question.. lol.. instead of making it slide, is there a way to make it fade?

July 9, 2010 at 12:38 AM

There is no such option.

July 9, 2010 at 7:55 PM

you guys are probably tired of me but...is there a way to embed a video, youtube or vimeo?

July 10, 2010 at 3:12 AM

You want to add video to post right?
Go to How to Embed(insert) online videos to your blogger blog?

July 19, 2010 at 1:01 AM

i want to add scroll bar on top as a leader board and want to add all my client list scrolling on this..

here is my blog link

http://jobsansaar.blogspot.com/

please help me....

July 19, 2010 at 2:59 AM

@Jobsplanet
Do you have any example website on which you have seen this.

July 19, 2010 at 3:38 AM

@drraman

here is the website http://www.global-opportunities.net/

you see on the left hnd side, universities are scrooling.

please help me in this.


Thanks

September 12, 2010 at 9:07 AM

I cannot seem to get the slideshow to stay within the wrapper. What part of the code do I change do keep it inline with the center wrapper?

September 13, 2010 at 1:09 AM

@ Elle P.C. Smith

Can you provide the URL of your blog.

September 28, 2010 at 2:16 AM

....Just commenting to say thanks for everything lol

March 2, 2011 at 12:08 PM

Hi draman, I googled and found this post.

Today I changed my template for another made by me, and in the "draft blog" I managed to put this slide working well on the wrapper I wanted but now that I changed to the final blog its not working!!

the slides are on top of each other instead of sliding like they were on the "draft blog" :\

I don't know what else to change and depend on your help please :(

March 3, 2011 at 5:27 AM

Hi Dav7

what is draft blog?
Is it Blogger in Draft?

March 3, 2011 at 11:45 AM

No, its just another blogger but private, were I test my template before publishing on the main blog.

forget my problem, I realized its like you say:

Limitation: This slider may or may not work with custom domain.

I have a custom domain :_(

March 5, 2011 at 11:23 AM

Hey, I need your help here!

It doesn't seem to work for me..

All the links are inactive and the slider "box" doesn't appear at all!

My blog is (http://atwistedblog.blogspot.com/) - I have deactivated the slider, until I find a solution and make it work!

I have taken a screenshot of the slider as it appears, so you can see the problem. Don't mind the greek, or the background image, just tell me about the slider problem, please!

Here is the pic:

https://lh5.googleusercontent.com/-pkURx3SEvJ8/TXKMpjYQpII/AAAAAAAAE4E/sJWJk-bGlJ4/s1600/sliderproblem.jpg

Please help as soon as possible!

Thank you very much!

March 5, 2011 at 11:57 PM

First download
jquery.flow.1.2.auto.js
and upload to your Google sites a/c as described here
http://free-blogger-help.blogspot.com/2010/04/uploadhost-javascript-or-js-files-to.html

Solution for inactive links
--------------------

Use the code given in following link instead of step 3 code given above. It will give you clickable read more option
http://depositfiles.com/files/36aolhfzf


OR
you can add link to the image as discussed in above comments (Prince Arnold comments)

March 6, 2011 at 12:29 AM

Dear drraman,

thank you for your very quick response!

I had already uploaded the .js file and i did that step correctly.

I have tried it now on my test blog and it's working great ( it only needs some color changing, but that's easy).

You can see it here (http://twistedtest13.blogspot.com/)

Now, the only thing I can think is that in my main blog (http://atwistedblog.blogspot.com/) there is something that stops the slider from working.

Any ideas? Can you help, please? Is there any other possibility?

Thanks again!

March 6, 2011 at 1:55 AM

You have lot's of scripts in your blog. So this could be a reason. Try to remove unnecessary codes (make back up first) and check if it works.

March 7, 2011 at 12:47 AM

I removed many scripts, but it still doesn't work..

Thanks for your help, drraman. I think there is nothing more to do!

March 7, 2011 at 5:50 AM

You can try the another slider
http://www.blogger-help.com/2010/06/featured-content-slider-for-blogger.html

or change the template with one that already has a content slider

October 30, 2011 at 9:21 PM

Hi I have a custom domain and have found that the above silder does not work on my blog.

Is there no way of making it work with custom domain?

October 30, 2011 at 9:27 PM

My blog's url is www.2wheelsindia.com (its blogspot url is www.indian2wheels.blogspot.com)

November 1, 2011 at 12:42 AM

try other one: http://www.blogger-help.com/2010/06/featured-content-slider-for-blogger.html

Anonymous
January 8, 2012 at 9:18 PM

Great Slider! Just wondering, is there a way to only show the slider on the homepage?

Cheers

January 8, 2012 at 11:50 PM

for that purpose you can use this hack
http://www.blogger-help.com/2010/07/show-hide-any-widget-on-home-page-or.html

Anonymous
January 9, 2012 at 4:04 PM

Thanks for the hack link. It did just what i needed :) Great site by the way!

Cheers

March 10, 2012 at 7:51 PM

hiii i want to add google adsen in my blog but when i past my adsen html code into html tab of blog my blog not display the ads on my blog
plz send solution on my email id saobaljinder@gmail.com

March 15, 2012 at 6:17 AM

REad

http://www.blogger-help.com/2008/07/how-to-add-google-adsense-ads-code-to.html

April 3, 2012 at 4:04 AM

thank sooo much...

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More