слайдер Рекомендуемые записи Slider для Blogger

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"
STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

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

STEP #3
Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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>

Now Click Save Template



Finally go to Page Elements --> Add a Gadget --> HTML/JAVA Script. And add following code 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">

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

t's Done.

Customization 

Code 1. You can change the background colors in code 1 to suit your blog.

Code 2. First of all downloadhttp://sites.google.com/site/freeblo...ow.1.2.auto.js and upload it to google sites.

You can change width, height and duration speed.

Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:

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

Also you have to add

4

after

3

and so on for next slides.

................................................................................................
................................................................................................
................................................................................................