Fully automated Recent post slider widget for Blogger

Blogger is best place to do blogging easily and the best thing of it is that it is FREE! and there is no downtime of the server because it is hosted on Google Servers. Blogger become popular among bloggers because now it has lots of blogger templates and blogger widgets archives. So, whenever you want to add some new features to your blog e.g popular posts of all time in sidebar or recent posts slider etc then you only need to search on google and you get lots of widgets related to your choice.
Fully automated Recent post slider widget for Blogger

Displaying a fully automated Recent posts slider to your blogger blog on homepage or on any other page is one of the best way to attract the visitors and increase their time on site. This will help you to decrease the bounce rate which is good. So, if you are on the way to get the awesome cool designed recent posts slider for your blogger blog then you are at right place because here I have a Fully automated Recent post slider widget for Blogger  for your guys,
Check demo Here:


See the Pen Recent Post Slider Responsive by maher Afrasiab (@maherafrasiab) on CodePen.


After seeing the demo I think now you are interested in using this slider on your blogger blog.

How to Install automated Recent post slider for Blogger 

The installation process is very easy and simple. All you need to do is follow the below steps:

  • Go to Blogger dashboard and then to Template tab.
  • click on the edit template tab
  • Now search for the <style> tag and paste the below CSS code in between the  tag


CSS Styling code:

#featuredpost {margin:15px auto; width: 970px;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}


  • Now after adding the CSS part now its time for Jquery code. So for this
  • Search for </head> tag and paste the below code just above it. 

Jquery Code:

function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"YOUR BLOG URL",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
Customization:
Here are some necessary customisations to customize the widget for your blog:
  1. Change the yellow highlighted text with your blogger blog homepage url.
  2. if you want to change the image size then change the Orange highlighted 500 with your desired one.
  3. If you don't want the widget to auto play then change the cyan highlighted true to false,
  4. If you want to show the post labels in widget then change the light pink highlighted false to true.


HTML Code:

Ok, Now here comes the last and important part to show the widget on your blog. To do this you only need to paste the below line of code where you want to show your widget. You can choose the homepage below the menubar because this widget looks cool there.
<div id="featuredpost"></div>

Hope that you like this Fully automated Recent post slider widget for Blogger and find this post helpful. If you find this post helpful then make sure to share this post with others, :)
Fully automated Recent post slider widget for Blogger Fully automated Recent post slider widget for Blogger Reviewed by Maher Afrasiab on 2:20:00 pm Rating: 5

10 comments:

  1. Its not working for me, after done everything, the menu shows but submenus are hiding under "textures" of my blogg.

    ReplyDelete
  2. i mean the post image dont show in the widget only the name

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Wonderful blog! I found it while searching on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Many thanks.
    2048 online | tanki online 3

    ReplyDelete
  5. Great post. I was checking continuously this blog and I am impressed!
    Very useful info specifically the last part :) I care for such info much.
    I was looking for this certain information for a very long time.
    Thank you and best of luck hotmail login | hotmail email login | hotmail account login

    ReplyDelete
  6. Works like charm thanks for this post

    http://androidclub4u.blogspot.com

    ReplyDelete
  7. The article you have shared here very good. This is really interesting information for me. Thanks for sharing!
    hotmail.com login |hotmail log out |gmail login

    ReplyDelete
  8. Social showcasing looks simple at first glance however in the event that you are meaning to drive activity from informal communities then you will need to buckle down. There are several long range interpersonal communication sites over the web however just a couple are amazingly mainstream... Click Here

    ReplyDelete

Powered by Blogger.