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

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

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:

]]></b:skin>

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:

</head>

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

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:

<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>

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.

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

Relax and enjoy, don't be rush.

Related Post