Add/Install Simplest jQuery Featured Content Slider in Blogger/Blogspot Blog

By using a jQuery content slider you can show off your blog’s best content on the home page in a beautiful flowing style. Content rotates automatically in these sliders.
Previously I bloggerized one of the most beautiful content sliders on web and wrote a simple tutorial here. As promised I’m here again with a new and rather simpler version of a content slider powered by jQuery.

This Simple version of Content Slider uses divs tags, which slide whole div frames containing both text and images at same time. This creates a nice sliding effect with one article per slide.
You can view the DEMO of this content slider before proceeding for installation steps.
I simplified the complex instructions written with the original slider’s source for all blogger.com users.

---

Installing some CSS and JavaScripts in Template

1. Go to your Layout > Edit HTML and click “Download full template” to download template’s backup (recommended)
2. In your template, find ]]></b:skin> and just ABOVE it, paste this code:
#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }
#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; }

3. Now find </head> and just ABOVE it, paste this code:

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


---

Adding the Widget and it’s contents

4. This part is the easiest. Go to Layout > Page Elements and click “Add a Gadget” wherever you want to put the slider. (usually just below navigation menu).
5. Choose “HTML/JavaScript” from the gadgets list and paste the code below in the content area.
<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">
TITLE-OF-THE-SLIDE
<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">
TITLE-OF-THE-SLIDE
<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">
TITLE-OF-THE-SLIDE
<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>


---

Customizations

- (In code of Step 3) numbers in red are width and height of the main slider while the number in green is the sliding speed.
- In this content slider everything resides in the widget’s div tags.
(In code of Step 4) Just replace “IMAGE-TITLE“, “TITLE-OF-THE-SLIDE“, “TEXT-OF-THE-SLIDE” with your image, title and text respectively.
You can increase the number of slides according to your need and available space.
- If you increase the number of slides, then don’t forget to increase “jFlowControl” numbering.
For example if you add another (fourth) slide then you have to add <span class=”jFlowControl”>4</span> in order to show number “4″ on the main widget.
So if you have like 15 slides, then make sure you have <span class=”jFlowControl”>15</span> (upto 15).
- (In code of Step 3) Links given in blue are links to 2 JavaScripts that this slider requires. If you have your own server you should download the scripts and upload them on your server for speedy loading.

Demo

View slider’s DEMO.
Hope you got all the installation and customizations steps. If you face any problem installing this, feel free to leave the queries in the comments below.