Responsive Recent Posts Slider Blogger Widget

Responsive Recent Posts Slider Blogger Widget

Updated on 18 May - Post a Comment

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.
  5. Now copy the code provided below and paste it inside newly created widget.
    6. <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_ZYujKyZ7zLRv6TRJG78mnuifGXTyGDUUv_oPmiecFrDcACh7HeRtjCyh8nlPYRhTDPzVffY5_4vRed7KGFrwUzpPf4kaTQqrvho6DYNtrEeLtYguIo_od90v9JUQ2bOshvsSo-BXjA/s1600/fade+bloggersstand.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'><-e30/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://lh5.ggpht.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>
  6. 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.
Tags:

0 comments for Responsive Recent Posts Slider Blogger Widget

Cancel