Simple jQuery Featured Content Slider for Blogger Blog.

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

Posted in: Blogger Hacks n Tips,Blogger Tools,Blogger Widgets

Related Posts