Recent Post Slider Widget For Blogger

Recent Posts For Blogger. Ok my friend on this occasion we will share again a cool slider widget that recent post slider widget that you can place it anywhere on your blog because this widget responsive and has a width of 100%. But the most suitable in our opinion if you use this to blog sidebar, so that your blog look more beautiful and has its own charm and because it is more suitable widget placed here.



There is also a widget that as we have already been distributed only difference this widget extends to the side different from the widget below, if you are interested please read our article entitled recent post how to create responsive slider. Well if you are interested in this widget, please grab the code and post to your blog.

Recent Post Slider Widget For Blogger

1. Log in to your blog
2. Go to the Layout menu >> Add a Gadget >> HTML/Javscript .
3. Enter the code below.

<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMaiwybhgEdC5aIKVYYVpbl6HBJs9HQLnx1fjgPKuLdlOUCPBkUctLo4c94idcQ2ma359jATlY_prdvuJTRYUHm5ueOeF2YFzImw_t_F37A658UwgpHuEvQ86mOlZWNkoYUafzbqM5Irc/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('z 1q(a){(z(e){6 h={I:"",O:4,3:"",R:20,1b:1l,19:E,J:"1t",17:"14://1.1m.1s.13/-1v/1w/1B/1C/1N/1X.1Y",11:["21","2f","2g","2h","2i","2k","2l","2m","2q","1e","1h","1i"],P:E};h=e.1k({},h,a);6 g=e(h.3);6 d=h.O*1n;g.1r(\'<A 2="C"><G 2="1x"></G></A><A 2="1A"><a D="#" 2="Z">1G</a><a D="#" 2="L">1P</a></A>\');6 f=z(w){6 q,k,m,u,x,p,t,v,r,l="",s=w.1f.1g;12(6 o=0;o<s.T;o++){12(6 n=0;n<s[o].Q.T;n++){N(s[o].Q[n].1o=="1p"){q=s[o].Q[n].D;2K}}N("U$V"W s[o]){u=s[o].U$V.1u.X(/\\/s[0-9]+\\-c/g,"/s"+h.R+"-c")}1y{u=h.17.X(/\\/s[0-9]+(\\-c|\\/)/,"/s"+h.R+"$1")}k=s[o].1z.$t;r=s[o].Y.$t.F(0,10);m=s[o].1D[0].1E.$t;x=r.F(0,4);p=r.F(5,7);t=r.F(8,10);v=h.11[1F(p,10)-1];l+=\'<B><a 1H="1I" D="\'+q+\'"><A 2="1J"></A><1K 2="1L" 1M="\'+u+\'"/><S>\'+k+\'</S></a><A 2="1O"><y 2="1Q"><y 2="1R">\'+t+\'</y> <y 2="1S">\'+v+\'</y> <y 2="1T">\'+x+\'</y></y> <y 2="1U">\'+m+"</y></A></B>"}e("G",g).1V(l).1W(h.J)};6 c=z(){e(h.3+" .L").M()};6 b=z(){e.1Z((h.I===""?15.16.22+"//"+15.16.23:h.I)+"/24/25/26"+(h.P===E?"":"/-/"+h.P)+"?27-28="+h.O+"&29=Y&2a=2b-W-2c",f,"2d");2e(z(){e(h.3+" .Z").M(z(){e(h.3+" .C B:K").18(e(h.3+" .C B:H"));1a E});e(h.3+" .L").M(z(){e(h.3+" .C B:H").2j(e(h.3+" .C B:K"));1a E});N(h.19){6 i=h.1b;6 j=1c(c,i);e(h.3+" .C B:K").18(e(h.3+" .C B:H"));e(h.3+" .C").2n(z(){2o(j)},z(){j=1c(c,i)})}e("G",g).2p(h.J)},d)};e(1d).2r(b)})(2s)};1d.2t(\'</2u><a D="14://2v.2w.13" 2x="2y-2z: 2A; 2B-2C:2D;2E:2F; 2G: #2H;">2I 2J 1j</a>\')',62,171,'||class|idcontaint|||var||||||||||||||||||||||||||||span|function|div|li|sliderx|href|false|substring|ul|last|blogURL|loadingClass|first|nextx|click|if|MaxPost|tagName|link|ImageSize|h4|length|media|thumbnail|in|replace|published|prevx||MonthNames|for|com|http|window|location|pBlank|before|autoplay|return|interval|setInterval|document|Oct|feed|entry|Nov|Dec|Widget|extend|5000|bp|200|rel|alternate|FeaturedPostSide|html|blogspot|loadingxx|url|htG7vy9vIAA|Tp0KrMUdoWI|rcentside|else|title|buttons|AAAAAAAABAU|e7XkFtErqsU|author|name|parseInt|prev|target|_blank|overlayx|img|random|src|s1600|label_text|next|date|dd|dm|dy|autname|append|addClass|grey|gif|get|100|Jan|protocol|host|feeds|posts|summary|max|results|orderby|alt|json|script|jsonp|setTimeout|Feb|Mar|Apr|May|after|Jun|Jul|Aug|hover|clearInterval|removeClass|Sep|ready|jQuery|write|br|www|nomiidesign.blogspot|style|font|size|8px|text|decoration|none|float|right|color|616469|Get|This|break'.split('|'),0,{}))
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://nomiidesign.blogspot.com/",
 MaxPost:10,
 idcontaint:"#featuredpostside",
 ImageSize:300,
 interval:5000,
 autoplay:true,
 tagName:false
});
//]]>
</script>

blogURL : Change the URL / address of your blog .
MaxPost : Number of posts that will be displayed by the slider .
Interval : The time of the slide effect in milliseconds
autoplay : Can be replaced "true " or "false " ( without quotes ) automatic slide effect or not .
tagname : This is if you want to display the widget with a specific label , for example, want to display the widget and the label " Blog " TagName contents with " Blog " ( without the quotes )
Hope you like it