Responsive Recent Posts Slider Blogger Widget
close
Responsive Recent Posts Slider Blogger Widget

Responsive Recent Posts Slider Blogger Widget

Responsive Recent Posts Slider Blogger Widget

I have recently shared a blogger widget called vertical recent posts slider widget for blogger you can check it out I think you will also like that widget.

This time I am going to share with you and new recent posts blogger widget this is also recent post slider but this is horizontal and full width slider and also responsive.

I have created this slider to show Recent posts but if you want to show random posts or any other kind of posts you can comment me I will try to accommodate this slider to that widget.

On this website I usually use to share blogger widgets which I create with all my will power and share that widgets with you so if you want beautiful and personalized blogger widgets stay updated to this blog and visit it daily.

So before going ahead and sharing the source code of this widget with you see the demo if the thumb of this post and if you like this demo then you can add this widget to your blog but if you don't like this demo you can leave this article because this is not for you.

So you may have seen the demo of this recent posts slider above I think you will like it I just spent two days in creating this so you should have appreciate my work.

So now it's time to build and add this widgets to your blogger blog so as before below are the steps which can help you to add this widget into your blog.

I know that this slider is attractive and it will blow your mind you should add this into your blogger blog. Here one thing I want to tell you is that do you know that if your website is attractive then the visitors of your website are bound to come back again and visit your site? This slider will help you to make your site attractive so I will recommend you to add this into your blogger blog.

Steps to Add Responsive Recent Posts Slider to Blogger:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Select HTML/Javascript Widget From List
  5. Choose the best location where you want to show up this widget in the layout section of your blogger dashboard.
  6. Now copy the code provided below and paste it inside newly created widget.
  7. <style>
    /* CSS Responsive Slider Recent Post */
    #recentpostbsd {margin:15px auto;}
    #stslider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #stslider ul,#stslider li{padding:0;margin:0;list-style:none;position:relative}
    #stslider ul{height:320px}
    #stslider li{width:50%;height:100%;position:absolute;display:none}
    #stslider li:nth-child(1), #stslider li:nth-child(2), #stslider li:nth-child(3), #stslider li:nth-child(4), #stslider li:nth-child(5){display:block}
    #stslider li:nth-child(1){left:0;top:0}
    #stslider li:nth-child(2){left:50%;width:25%;height:50%}
    #stslider li:nth-child(3){left:75%;width:25%;height:50%}
    #stslider li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
    #stslider li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
    #stslider 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:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
    #stslider li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
    padding:0;font-family:'Roboto';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
    #stslider li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
    background:#8941d1;margin:0;}
    #stslider li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
    padding:5px 21px;text-transform:uppercase;margin:0;}
    #stslider li:nth-child(1) span.dy, #stslider li:nth-child(1) span.autname{display:none;}
    #stslider a{display:block;width:100%;height:100%;overflow:hidden}
    #stslider 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;}
    #stslider 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;}
    #stslider .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://4.bp.blogspot.com/-KFJSSIzWJJ0/Vtkt6FVQjuI/AAAAAAAAFfo/nxUUAjMB0dk/s1600/fade%2Bbloggersstand.png);background-position:50% 40%;background-repeat:repeat-x;}
    #stslider h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Roboto';
    left:10px;padding:5px 10px;color:#fefefe;z-index:3;line-height:20px;font-weight:normal;
    background:rgba(40,40,40,0.6);text-align:left;text-transform:uppercase;margin-right:10px;}
    #stslider .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
    position:absolute;background:#8941d1;padding:3px 6px;font-family:'Roboto';
    text-transform:uppercase;}
    #stslider li:nth-child(2) .autname,#stslider li:nth-child(3) .autname,#stslider li:nth-child(4) .autname,#stslider li:nth-child(5) .autname{display:none;}
    #stslider .overlayx,#stslider li{transition:all .4s ease-in-out}
    #stslider li:nth-child(1) .overlayx{display:none;}
    #stslider li:hover .overlayx{opacity:0.1}
    @media only screen and (max-width:800px){
    #stslider li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
    @media only screen and (max-width:600px){
      #stslider ul{height:600px}
      #stslider li:nth-child(1){width:100%;height:50%}
      #stslider li:nth-child(2){top:50%;height:25%;left:0;width:50%}
      #stslider li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
      #stslider li:nth-child(4){left:0;top:75%;height:25%;width:100%}
      #stslider li:nth-child(5){display:none;}}
    @media only screen and (max-width:480px){
    #stslider li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
    </style>
    <div id="wrapper">
    <div id="recentpostbsd"></div>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script>
    function Recentpostbsd(t){!function(a){var e={blogURL:"https://www.softwebtuts.com",MaxPost:5,idcontaint:"#recentpostbsd",ImageSize:500,interval:1e4,autoplay:!1,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:!1};e=a.extend({},e,t);var s=a(e.idcontaint),l=e.blogURL,n=200*e.MaxPost;""===e.blogURL&&(l=window.location.protocol+"//"+window.location.host),s.html('<div id="stslider"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(e.loadingClass);var i=function(t){for(var l,n,i,r,o,d,c,u="",p=t.feed.entry,f=0;f<p.length;f++){for(var g=0;g<p[f].link.length;g++)if("alternate"==p[f].link[g].rel){l=p[f].link[g].href;break}r="media$thumbnail"in p[f]?p[f].media$thumbnail.url.replace("/default.jpg","/maxresdefault.jpg").replace(/\/s[0-9]+\-c/g,"/s"+e.ImageSize+"-c"):e.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+e.ImageSize+"$1"),n=p[f].title.$t,c=p[f].published.$t.substring(0,10),i=p[f].author[0].name.$t,o=c.substring(0,4),d=c.substring(5,7),u+='<li><a target="_blank" href="'+l+'" title="'+n+'"><div class="overlayx"></div><img class="random" src="'+r+'" title="'+n+'"><h4>'+n+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+c.substring(8,10)+'</span> <span class="dm">'+e.MonthNames[parseInt(d,10)-1]+'</span> <span class="dy">'+o+'</span></span> <span class="autname">'+i+"</span></div></li>"}a("ul",s).append(u)};a(document).ready(function(){var t="/-/"+e.tagName;!1===e.tagName?(t="",a.ajax({url:l+"/feeds/posts/default"+t+"?max-results="+e.MaxPost+"&orderby=published&alt=json-in-script",success:i,dataType:"jsonp",cache:!0})):a.ajax({url:l+"/feeds/posts/default"+t+"?max-results="+e.MaxPost+"&orderby=published&alt=json-in-script",success:i,dataType:"jsonp",cache:!0}),setTimeout(function(){if(a("#prevx").click(function(){return a("#stslider li:first").before(a("#stslider li:last")),!1}),a("#nextx").click(function(){return a("#stslider li:last").after(a("#stslider li:first")),!1}),e.autoplay){var t=e.interval,l=setInterval("rotate()",t);a("#stslider li:first").before(a("#stslider li:last")),a("#stslider").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",t)})}s.removeClass(e.loadingClass)},n)})}(jQuery)}function rotate(){$("#nextx").click()}document.write("");
    //<![CDATA[
    $(document).ready(function () {
    Recentpostbsd({
    blogURL:"https://www.softwebtuts.com",
    MaxPost:5,
    container:"#recentpostbsd",
    ImageSize:300,
    Time:1000,
    autoplay:true,
    tagName:false
    });
    });
    //]]>
    </script>
  8. Name Your Widget and Save It.

I have included jQuery library in the above code because without jQuery library included our this widget will not work properly if you have already added jQuery library to your blogger blog template then you don't have to add this again you can remove it from the above code.

Now as you have created this blogger widget and added it to your blog now it's time to make replacements in the above code. So below are the some replacements that you have to do in the above code.

Replacements

ReplacementDescription
https://www.softwebtuts.comReplace this url with your blog url or the url of that blog of which you want to show posts.
MaxPost: 5Replace 5 with the number of posts to be shown in this recent post widget.
ImageSize: 300Replace 300 with the size of image higher the value higher will be resolution but load time will be increased.
Time: 1000Replace 1000 with the time to show next post this time is in milliseconds 1000 ms = 1 second. By Default it is 1 second.
autoplay: trueReplace true with false or leave it. If it is true then posts will be automatically slided or shuffled.
tagName: falseReplace false with the name of label if you want to show recent posts with specified label. For example if you want to show posts with label name then the code will be tagName: "SEO", here SEO is the label name.

Now you are all done you have done all the replacements in the above code now it's time to see the real time preview of this widget on your own website so go and visit your website now and see if it is working properly or not, if it doesn't then you can comment below what problem you are facing I will try to resolve that problem as soon as possible.

Conclusion:

I know that you will like this widget if you do then please share it with your friends who have blogger websites they might also like it and subscribe to the newsletters of this blog so that you will never miss an update.
Disqus Codes

No comments

Notifications

Disqus Logo