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

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

]]>

And immediately before 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; }

Now find this code in the template:

And immediately before it, paste this code:









Now click Save Template

STEP #2 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

IMAGE-LINK"/>

TITLE-OF-THE-SLIDE

TEXT-OF-THE-SLIDE

.

.

.

.

Prev

1

2

3



Next

Now click Save 

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 4 in order to show number "4" on the main widget.

So if you have like 15 slides, then make sure you have 15 (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.

UPDATE:  I updated some of my posts, this post I update 11+ Featured Content Slider for Blogger Using jQuery........