Vertical Recent Posts Slider Blogger Widget
close
Vertical Recent Posts Slider Blogger Widget

Vertical Recent Posts Slider Blogger Widget

Vertical Recent Posts Slider Blogger Widget

Hello friend once again to this brand new article today in this article I am going to share with you vertical recent posts slider widget for blogger yes this widget is for blogger users.

This is responsive and beautiful blogger widget and can be set or positioned to the sidebar of your blogger blog yes you can add it in the sidebar of your blog that's why this is called vertical recent post slider widget for blogger.

On this website you will find beautiful and attractive blogger widgets, tutorials, articles about SEO and many more so for that keep visiting this site.

I usually create recent posts blogger widgets because 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:

Vertical Recent Posts Slider Blogger Widget

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:

  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click Edit HTML
  4. Now Search for </head>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Now Copy the code provided below and paste it before </head> which we have founded in step 4.
  7. <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://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/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://1.bp.blogspot.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>
  8. 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:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Select HTML/Javascript Widget from widgets list.
  5. 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.
  6. Now Copy the code provided below and paste it as a widget content and give you widget a title.
  7. <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>
  8. 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:


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.
interval: 10000Replace 10000 with the time to show next post this time is in milliseconds 1000 ms = 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.

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

Conclusion:

You have successfully added this Vertical Recent Posts Slider Blogger Widget and now you can view it on you blog you will like it just go and do that and keep visiting this site for more beautiful blogger widgets in different beautiful designs.

Good Luck & Have a Nice Day.
Disqus Codes

No comments

Notifications

Disqus Logo