Simple Image + Text Slider for Blogger/Blogspot

This Article Was Live On April 18th, 2012 And So Far Have: 0 Comments...
Last Updated on June 21st, 2014

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.

Features:
1.) Image + Text Slides.
2.) Slides Counter.
3.) Simple And Stylish With Quick Load And Easy To Install.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

<style>

#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; }

<style>

$(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: 100,

prev: ".jFlowPrev", // must be class, use . sign

next: ".jFlowNext" // must be class, use . sign

});

</script>

<!– Slide #1 Starts–>

</div>

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

</div>

</div>

<!– Slide # 1 Ends –>

<!– Slide #2 Starts–>

</div>

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

</div>

</div>

<!– Slide # 2 Ends –>

<!– Slide #3 Starts–>

</div>

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

</div>

</div>

<!– Slide # 3 Ends –>

<!– You can add as many slides as you want above this line –>

</div>

<!– Increase these numbers as with the increase in your number of slides above –>

</div>

</div>

Customization:
1.) Change All IMAGE-LINK With Your Image URL.
2.) Change All TITLE-OF-THE-SLIDE, TEXT-OF-THE-SLIDE With Your Slide Title And Text Respectively.
3.) Save And Enjoy.

Recommended For You:

How To Display 200+ Comments In Blogspot Blog?