Vertical Recent Posts Slider Blogger Widget

This widget can be made without using blogger conditional tags and can be made locally but if you want same style for different blogger widgets you can come and that in the comment section I will try to make that widget for you.

Ok without further we do let me show you the demo of this vertical recent posts slider widget for blogger.

Demo / Preview:

You may have seen the demo now if you like this widget lets make it and add it to your blogger blog so for that follow the steps provided below.

Steps to add this widget code in blogger:

Go to Blogger Dashboard
Go to Theme/Template Section
Click Edit HTML
Now Search for </head>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

Now Copy the code provided below and paste it before </head> which we have founded in step 4.

<style>a,a:visited{color:#555;outline:0;text-decoration:none}a:focus,a:hover,a:visited:hover{color:#22a1c4;text-decoration:none}.terbaru-container{background:#fff;width:340px;margin:5% auto;padding:10px;border-radius:5px}ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}ul.rcentside{font-size:11px}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:auto}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{transition:all .4s ease-in-out}ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWnUIfvzQsgPpQiWPBC6GLK8UPoJJsLLVaX70RqGQl3NQ8en-B5LlAyMbHl4Kco2UuSeS0s7mqhY7niuzwN0_DLKa_e5uk1pViFpbJNkAC7b_CDHf6EORtn2APzXMPaPIPf-aqyulNfk8/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}ul.rcentside .overlayx:hover{opacity:.1}ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:400;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}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><script>
//<![CDATA[
function FeaturedPostSide(a){(function(e){var h={blogURL:"https://www.softwebtuts.com",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://lh5.ggpht.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/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 d=h.MaxPost*200;g.html('<div class="sliderx">
<ul class="rcentside"></ul>
</div>
<div class="buttons">
<a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>
');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+'"><div class="overlayx">
</div>
<img class="random" src="'+u+'"/><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).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

Save Theme/Template

Now you have successfully add the widget code to your blogger blog now its time to show this widget in blogger so follow these steps now and add this widget.

Steps to add this widget code in blogger:

Go to Blogger Dashboard
Go to Layout Section
Click Add New Widget
Select HTML/Javascript Widget from widgets list.

Choose the position where you want to show this widget but i recommend you to set this widget to sidebar because it is it's specified position.

Now Copy the code provided below and paste it as a widget content and give you widget a title.

<div class="terbaru-container"><div id="featuredpostside"></div></div>
<script>
//<![CDATA[
FeaturedPostSide({
  blogURL: "https://www.softwebtuts.com",
  MaxPost: 5,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 10000, //in seconds
  autoplay: true,
  tagName:  false //set label name eg. "seo" to show posts with this label.
});
//]]>
</script>

Save Widget

You are all done now go and look at this widget is is working or not if it is working then it will show recent posts of my website because URL is of my website to make this widget completely your's and show your blogs recent posts you have to make some of these customizations that are listed below.

Customization in the above code:

Replacement	Description
https://www.softwebtuts.com	Replace this url with your blog url or the url of that blog of which you want to show posts.
MaxPost: 5	Replace 5 with the number of posts to be shown in this recent post widget.
ImageSize: 300	Replace 300 with the size of image higher the value higher will be resolution but load time will be increased.
interval: 10000	Replace 10000 with the time to show next post this time is in milliseconds 1000 ms = 1 second.
autoplay: true	Replace true with false or leave it. If it is true then posts will be automatically slided or shuffled.
tagName: false	Replace 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.

That's it you are done with all the custimizations.

source:softwebtuts.com

A4F

Vertical Recent Posts Slider Blogger Widget