Jquery Recent Posts Slider For Blogger
Wondering How to Add a Recent Posts slider widget on your blogger blog then today We are here for sharing with all of you my new project. After doing hard work out of 3 days we have created a nice looking recent posts slider widget widget for your blogger blog. This is cool trick. You can add recent post as your slider. So, This will help you to show your recent post with slider effect on your blogger blog. You already know that My Blogger Guides team already published hundreds of blogger widgets for blogger users and our goal is minimum thousand blogger widgets for our readers. If you want to add then it is not hard to add it to your blog, just follow below steps and get it on your blogger blog.
Note : First Download a Backup Copy Of Your Template.
How To Add Recent Posts Slider Widget To Blogger
- Go To Blogger Dashboard.
- Template >> Edit HTML.
- By pressing CTRL+F search for ]]></b:skin> tag and paste below code just above of this tag.
/* Slider Widget By mybloggerguides.com */
#slide-container {
height: 300px;
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 {
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;}
- Now Search For </body> tag and paste below code just above of this tag.
<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>
<!– by mybloggerguides.com –>
- Now Save Template.
- Now Go To Layout >> Add A Gadget.
- Select HTML/JavaScript.
- Paste Below Code inside popup window.
<div id=”slider”>
<script style=”text/javascript” src=”https://googledrive.com/host/0B-tTrbz0ZUcpd2NYSHE5MTdLa2s”></script>
<script style=”text/javascript”>
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!– replace with your web address (marked with red color) –>
<script src=”https://mybloggerguides.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999″></script>
</div>
Required Changes:
* You can change numbers of showing post by Changing 6
* You can change numbers of post characters by Changing 150
* Replace mybloggerguides.com with your site/URL
- Now Save HTML/JavaScript.
- That’s it. You have added recent posts slider widget on your blogger blog.
Conclusion:
So above guide is about How To Add Recent Posts Slider Widget To Blogger Blog and we hope by this guide you can easily install this widget on your blogger blog, If anyhow problem persist then drop a comment below. We will help you out of sure. Have a look on recent post slider widget and don’t forget to give us feedback. Do share.
Contents
