rankwebsite: jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
How To Add Automatic Recent Post Slider In Blogger With jQuery</h2>
 
How To Add This Slider To Blogger? 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqe9nv9EDAvCOMcVaJ47cLN6M2APrfTCEZkfDRXf3cCR2LI-L9YGJLX2h69e0EWj4JZD7vOR0f3yO7FPbbatcziB32GWTosEWWjW0BQ5uOjawn66ZdmUT31oVpsrbZAsIvBFc_D31rBTx8/s1600/dff.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Automatic Recent Post Slider In Blogger With jQuery" border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqe9nv9EDAvCOMcVaJ47cLN6M2APrfTCEZkfDRXf3cCR2LI-L9YGJLX2h69e0EWj4JZD7vOR0f3yO7FPbbatcziB32GWTosEWWjW0BQ5uOjawn66ZdmUT31oVpsrbZAsIvBFc_D31rBTx8/s400/dff.PNG" title="How To Add Automatic Recent Post Slider In Blogger With jQuery" width="400" /></a></div>
 
 
Step 1 - Applying Styles 
 
Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template) 
 
As always download a copy of your template first. 
Now find for ]]></b:skin> 
Add below code just before ]]></b:skin> 
 
/* START EasySlider By websiteranker-seo.blogspot.in */ 
 
#slide-container { 
    height: 360px; 
    position: relative; 
    width: 480px; 
} 
 
#slider { 
    height: 360px; 
    left: 25px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    position: relative; 
    width: 480px; 
    font-family: calibri; 
} 
 
.slide-desc { 
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0; 
    color: #FFFFFF; 
    padding: 10px; 
    position: absolute; 
    right: 0px; 
    text-align: left; 
    top: 0; 
    width: 200px; 
    z-index: 99999; 
} 
 
.slide-desc h2 { 
    display: block; 
} 
 
.crosscol .widget-content { 
    position: relative; 
} 
 
#slider ul, #slider li, 
 
#slider2 ul, #slider2 li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
 
#slider2 { 
    margin-top: 1em; 
} 
 
#slider li, #slider2 li { 
/* 
 
define width and height of list item (slide) 
 
entire slider area will adjust according to the parameters provided here 
 
*/ 
    width: 480px; 
    height: 360px; 
    overflow: hidden; 
} 
 
#prevBtn, #nextBtn, 
 
#slider1next, #slider1prev { 
    display: block; 
    width: 30px; 
    height: 77px; 
    position: absolute; 
    left: -30px; 
    text-indent: -9999px; 
    top: 71px; 
    z-index: 1000; 
} 
 
#nextBtn, #slider1next { 
    left: 520px !important; 
} 
 
#prevBtn, #nextBtn, #slider1next, #slider1prev { 
    display: block; 
    height: 77px; 
    left: 0; 
    position: absolute; 
    top: 132px; 
    width: 30px; 
    z-index: 1000; 
} 
 
#prevBtn a, #nextBtn a, 
 
#slider1next a, #slider1prev a { 
    display: block; 
    position: relative; 
    width: 30px; 
    height: 77px; 
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0; 
} 
 
#nextBtn a, #slider1next a { 
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0; 
} 
 
/* numeric controls */ 
 
ol#controls { 
    margin: 1em 0; 
    padding: 0; 
    height: 28px; 
} 
 
ol#controls li { 
    margin: 0 10px 0 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 28px; 
    line-height: 28px; 
} 
 
ol#controls li a { 
    float: left; 
    height: 28px; 
    line-height: 28px; 
    border: 1px solid #ccc; 
    background: #DAF3F8; 
    color: #555; 
    padding: 0 10px; 
    text-decoration: none; 
} 
 
ol#controls li.current a { 
    background: #5DC9E1; 
    color: #fff; 
} 
 
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus { 
    outline: none; 
} 
 
/* END EasySlider By websiteranker-seo.blogspot.in*/ 
 
 
You can edit above CSS values as you wish.You may use our HTML Editor to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor) 
 
Step 2 - Adding JavaScript 
 
 
<ul style="text-align: left;">
<li>Now find for </body> tag</li>
<li>Add below code just after/below </body> tag.</li>
</ul>
 
 
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> 
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script> 
<script type='text/javascript'> 
//<![CDATA[ 
$(document).ready(function(){ 
 $("#slider").easySlider({ 
 auto: true, 
 continuous: true 
 }); 
}); 
//]]> 
</script> 
 
 
Now save your template. 
 
<div style="text-align: center;">
</div>
<ul>
<li style="text-align: left;">Adding The Gadget</li>
<li style="text-align: left;">Now go to Page Layout</li>
<li style="text-align: left;">Add a Gadget > HTML/JavaScript</li>
<li style="text-align: left;">Paste below piece of code and save it.</li>
</ul>
 
 
<div id="slider"> 
<script style="text/javascript" src="http://helperblogger.ucoz.com/code/easySlider.min.js"></script> 
<script style="text/javascript"> 
 var numposts_gal = 6; 
 var numchars_gal = 150; 
 var random_posts = false; // random posts 
</script> 
 
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> 
</div> 
 
 
Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things. 
To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4) 
If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5) 
Now save your all the changes and you are done.Visit your blog to see this beautiful slide.</div>

How To Add Automatic Recent Post Slider In Blogger With jQuery

How To Add Automatic Recent Post Slider In Blogger With jQuery How To Add This Slider To Blogger? Step 1 - Applying Styles Go t...

rankwebsite

Wikipedia

How To Add Automatic Recent Post Slider In Blogger With jQuery

Popular Posts

Labels

Blog Archive