Recents in Beach

Add Fully Automated Responsive Recent Post Slider to 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.

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.

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:

    Change the yellow highlighted text with your blogger blog homepage url.
    if you want to change the image size then change the Orange highlighted 500 with your desired one.
    If you don't want the widget to auto play then change the cyan highlighted true to false,
    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>


Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.

Post a comment

30 Comments

  1. Wow, absolutely fantastic blog. I am very glad to have such useful information.

    หนังไทยตลก

    ReplyDelete
  2. It isn't working... could you update it?

    ReplyDelete
  3. well thanks for the post but this is outdated no longer work
    Zakria khan

    ReplyDelete
  4. I followed same steps , but not working with my blog (nothing visible)

    ReplyDelete
  5. hard to implement.. please help visit www.kibanen.blogspot.com

    ReplyDelete
  6. hard to implement.. please help visit Kibanen

    ReplyDelete
  7. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  8. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  9. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  10. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  11. its not mowj anymore....I cant apply in my blog https://www.filmku.id/

    ReplyDelete
  12. https://conount.blogspot.com/?m=1

    ReplyDelete
  13. the JQuery code is not working. it shows there is an error in for(var o=0;o" or "/>".

    ReplyDelete
  14. Hi, Nice article. Thank you for the article. Please see my article about Best WordPress Slider Plugin.

    ReplyDelete
  15. Nice article. It's very helpful to me. Thank you for share with us. Can you please check my article error in revolution slider

    ReplyDelete
  16. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  17. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  18. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  19. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  20. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  21. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  22. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  23. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  24. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete