Column Style Recent and Labelled Posts Widget for Blogger

Column Style Recent and Labelled Posts Widget for Blogger

Updated on 15 May - Post a Comment


Do you want blogger widget which shows recent posts in columns? I think you want. So in this article I am going to share with you column style recent and label posts widget for blogger.

This column style recent and label posts widget shows up the recent posts of your blogger blog with label and without label you can also use this widget as a related posts widget it is possible to do so If you want comment in the comment section.

You can also use this widget to show featured posts of your blogger blog but for that you have to label your featured posts with the label "featured".

This widget is having three columns one column is bigger which only contains one post the next column is also of full height and it also contains 1 post and the last column has two posts in a row.

Contains animation:

This widget also contains animation for images when you have our any post the image of the post will start getting blurred due to an animation.

Is this widget Responsive?

Before we are going to add anything to website we think that is it responsive or not because responsiveness is one of the main thing that attracts visitors and helps get higher rankings.

You don't have to worry about this blogger widget is responsive to all devices you can check its responsiveness by by going to the demo page by clicking the button below.

Demo:

To see the demo of this widget click the button below and give it now.
View Demo

So now if you want to add this widget into your blogger blog after watching the demo you have to follow the steps which are provided below and do as it is said without leaving any step.

Make sure to read the steps carefully so that you will not face any difficulty while installing this widget into your blogger blog.

Steps to follow:

These are the steps to follow which we have to follow to install this widget into your blogger blog.

  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.
  5. Now copy the code provided below and paste it just above the tag we founded in step 4.
    6. <style>
    body {
        font-family: 'Poppins',sans-serif;
        padding: 0;
        margin: 0;
        font-weight: normal;
    }
    /* Featured Post by https://wwww.softwebtuts.com */
    *,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_stwrap{display:inline-block;width:100%;margin:0 auto 20px auto;overflow:hidden;max-height:410px}.featured_st{display:block;position:relative;float:left;overflow:hidden;height:410px}.featured_st.first{width:44.7%;margin-right:1px}.featured_st.second{width:25%;margin-right:1px}.featured_st.third,.featured_st.fourth{width:30%;height:205px}.featured_st.third{margin-bottom:1px}.featured_st a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}.featured_st a:before{width:100%;height:100%;position:absolute;content:'';background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);opacity:.7;z-index:2;transition:all .6s}.featured_st:hover a:before{opacity:1}.featured_st a .blog_contents{display:block;position:absolute;z-index:5;bottom:15px;left:15px;right:15px;letter-spacing:-1px;text-transform:uppercase;line-height:120%;transition:all 0.2s}.featured_stwrap span{color:#fff;padding:3px 6px;letter-spacing:0;font-size:12px;line-height:1;border-radius:3px;text-transform:capitalize;box-shadow:0 2px 5px rgba(0,0,0,0.2)}.featured_st.first span{background:#679e37}.featured_st.second span{background:#f8a724}.featured_st.third span{background:#029ae4}.featured_st.fourth span{background:#e53935}.featured_st a .blog_contents h3{color:#fff;margin-top:15px;font-size:16px;line-height:normal;font-weight:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:none}.featured_st a .blog_contents h3:hover{text-decoration:underline}.featured_st.first a .blog_contents h3{font-size:22px}.featured_st .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}.featured_st:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)}
    @media only screen and (max-width:768px){
    .featured_stwrap{max-height:initial}.featured_st.second,.featured_st.first,.featured_st.third,.featured_st.fourth{width:100%;height:300px;margin:0;margin-bottom:1px}.featured_st a .blog_contents{left:15px;right:15px;bottom:10px}.featured_st.first a .blog_contents h3,.featured_st a .blog_contents h3{font-size:20px}}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    // Featured post by https://www.softwebtuts.com
    function recentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length,document.write('<div class="featured_stwrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_st first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_st second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_st third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_st fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;
    //]]>
    </script>
  6. Save Theme/Template
  7. Now go to Blogger Layout Section
  8. Select PLace where you want to add this widget.
  9. Click Add New Widget
  10. Select HTML/Javascript Widget from Widgets list
  11. Now copy the source code provided below and paste it as widget content.
    • For Unlabeled Recent Posts use this code.
      • <div class='featured_stz' id='featured_stwrap'>
      <div class='ct-wrapper'>
        <!--Unlabeled-->
        <script>
      document.write("<script src=\"https://www.softwebtuts.com/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
      </script>
      </div>
      </div>
      ReplacementDescription
      https://www.softwebtuts.comReplace this URL with your website URL or remove it to auto fetch your Blog URL
    • For Labeled Recent Posts use this code.
      • <div class='featured_stz' id='featured_stwrap'>
      <div class='ct-wrapper'>
        <!--Labeled-->
      <script>
      document.write("<script src=\"https://www.softwebtuts.com/feeds/posts/default/--e30/tutorial?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
      </script>
      </div>
      </div>
      ReplacementDescription
      https://www.softwebtuts.comReplace this URL with your website URL or remove it to auto fetch your Blog URL

      tutorial

      Replace this label name with the label name of your choice for which you want to show posts in this widget.
  12. Save Widget

You are all done and you have successfully added this widget to your blogger blog but before saving the widget you have to make some replacements in the above code.

You can replace the highlighted text according to your requirement but if you don't know how to replace it you can see the table below the code provided above replacement word and the description is provided.

Best location to add this widget into your blogger blog:

You can choose any location on your blogger blog to add this widget because this widget is responsive and can be set anywhere or can be added anywhere but if you want my recommendations I will suggest you to place this widget in the header section or in the footer section of your blogger template so that this widget will be in full width and contains maximum posts as it can.

If this widget is visited through computer device then this widget will show up 4 posts in horizontal style in three columns but if it is visited through mobile device then 4 posts are shown but in vertical style.

Conclusion:

So now I conclude this post and in the end I want to say that if you have any difficulty while installing this column style recent and labelled post widget in blogger you can comment that difficulty in the comment section I will try to resolve your issue as soon as possible.

This column style recent and label post widget for blogger makes your website looks beautiful.
source:softwebtuts.com
Tags:

0 comments for Column Style Recent and Labelled Posts Widget for Blogger