how to add recent post slider in blogger.com blog It is really simple and you can install it without any html knowledge . You can see it's demo first so that you can decide it is good for your blog or not.
STEPS
- Goto blogger
- then in dashboard
- then go in layout
- then add a gadget and select html/javascript
- now paste the following code in it
<style>#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;}</style>
<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>
<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/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://zain-net.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
- Now replace http://zain-net.blogspot.com with your blog address.
- Adjust it with your need var numposts_gal = 6; var numchars_gal = 150;
Thank You
