LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Sliders » Simple Image + Text Slider for Blogger/Blogspot

Simple Image + Text Slider for Blogger/Blogspot

Simple Image + Text Slider for Blogger/Blogspot

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

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.

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *