Recent Posts Blogger Widget Grid Style

Recent Posts Blogger Widget Grid Style

Updated on 18 May - Post a Comment
Basically this is a recent post blogger widget which shows up recent posts by grabbing them from your website.

The appearance of this recent posts blogger widget will be that, first post will be having a bigger thumbnail and the rest of all post will be having smaller thumbnails in a grid style.


You can see the preview below.
Preview:

If you want to add this recent posts blogger widget with a grid style to your blogger blog you have to follow the steps which are provided below.

We will be using fontawesome CSS library in our widget for some icons which we will be including in our widget. If you already have that then you don't have to add it again.

Steps to make recent posts blogger widget with a grid style:

  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 above </head>
    6. <style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans); @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css); .th-container,div#main{ text-align:center; display:block; font-family: 'Open Sans', sans-serif; background:#ccc; padding:10px } div#main{ margin:0 auto; } .th-container{ margin:0 auto!important; float:none!important; list-style-type:none; width:100%; max-width:600px; min-height:70px; padding:0; font-size:12px } .th-container a{ text-decoration:none; color:#333 } .thumb{ display:block; position:relative; overflow:hidden; } .category-list,.th_narrow{ display:inline-block; text-align:center; border:1px solid #fff; background:#fff; border-radius:8px } .th_narrow a.category{ position:absolute; top:0; left:0; background-color:#2F2FA2; color:#fff; font-size:10px; height:25px; line-height:25px; padding:0 10px; text-transform:uppercase; letter-spacing:1px; z-index:1; width:100%; } .category-main-wrap{ text-align:center; transform:translateY(-58%); -ms-transform:translateY(-58%); -moz-transform:translateY(-58%); -webkittransform:translateY(-58%) } .category-main{ background:#fff; border:none; padding:10px 0; font-size:11px; position:relative } .category-list{ text-transform:uppercase; font-size:9px; line-height:1; font-weight:700; letter-spacing:2px; z-index:2; width:calc(100% - 61px) } .category-main:after,.category-main:before{ position:absolute; content:''; top:0; border-bottom:31px solid #fff; width:0 } .category-main:before{ left:-25px; border-left:31px solid transparent } .category-main:after{ right:-25px; border-right:31px solid transparent } .postmeta{ width:100%; text-align:center } .featuredPost.lastPost .day,.th-wide a.category{ color:#454545; font-weight:700; letter-spacing:1px; padding:0 10px; font-size:11px; text-transform:uppercase; margin-bottom:30px; opacity:.8; text-align:center; display:inline-block } .featuredPost.lastPost{ margin-top:-23px } .th-wide img{ height:auto; width:100% } .th-container i{ margin-left:3px; margin-right:3px } .th_narrow{ margin:0 6px; width:180px; max-height:160px; overflow:hidden } .post-comments{ background:#f64c72; font-size:12px; line-height:21px; color:#fff!important; display:block; position:absolute; top:0; right:0; z-index:2; } .th_narrow .comm{ display:block; position:relative; padding:2px 7px } .th_narrow .comm:before{ content:''; display:inline-block; border-left:4px solid transparent; border-right:4px solid #f64c72; border-top:4px solid #dd5827; border-bottom:4px solid transparent; position:absolute; top:24px; left:10px } .th_narrow .comm i{ margin-right:3px } 
</style>
  6. Now copy the code provided below and paste it where you want to show Recent Posts Blogger Widget Grid Style.
    7. <script type='text/javascript'>
//<![CDATA[
function recentarticles2(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts<=e.feed.entry.length?maxpost=numposts:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){for(var r,i,l,n,o=e.feed.entry[t],m=o.title.$t,h="",f=0;f<e.feed.entry[t].category.length;f++)h=h+'<a class="category" href="/search/label/'+e.feed.entry[t].category[f].term+'?max-results=6">'+e.feed.entry[t].category[f].term+"</a>",n='<a class="category" href="/search/label/'+e.feed.entry[t].category[f].term+'?max-results=6">'+e.feed.entry[t].category[f].term+"</a>";if(t==e.feed.entry.length)break;for(var g=0;g<o.link.length;g++)if("alternate"==o.link[g].rel){i=o.link[g].href;break}for(g=0;g<o.link.length;g++)if("replies"==o.link[g].rel&&"text/html"==o.link[g].type){r=o.link[g].title.split(" ")[0],l=o.link[g].href.split(" ")[0];break}if("content"in o)var p=o.content.$t;else if("summary"in o)p=o.summary.$t;else p="";postdate=o.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=p,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]=0==t?'<img min-width="620" min-height="240" class="alignone" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="180"/>');for(var v=[1,2,3,4,5,6,7,8,9,10,11,12],y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],u=postdate.split("-")[2].substring(0,2),w=postdate.split("-")[1],k=postdate.split("-")[0],x=0;x<v.length;x++)if(parseInt(w)==v[x]){w=y[x];break}var M=u+" "+w+" "+k;if(0==t){var A='<div class="th-container"><div class="th-wide"><div class="thumb overlay"><a href="'+i+'">'+img[t]+'</a></div><div class="category-main-wrap"><div class="category-list category-main"><h3 class="postTitle"><a href="'+i+'">'+m+'</a></h3></div></div><div class="featuredPost lastPost"><div class="postmeta"><span class="day">'+M+"</span>"+n+'</div><div class="clear"></div><span class="featuredPostMeta"><a href="'+i+'"></a></span></div></div><div class="right">';document.write(A)}if(t>0&&t<maxpost){A='<div class="th_narrow"><div class="thumb overlay"><a href="'+i+'">'+img[t]+"</a>"+n+'<a class="post-comments" href="'+l+'" target ="_top"><span class="comm"><i class="fas fa-comment"></i>'+r+'</span></a></div><h4 class="featuredTitle"><a href="'+i+'">'+m+'</a></h4><div class="clear"></div></div>';document.write(A)}j++}document.write("</div>")}imgr=new Array,showRandomImg=!0,numposts=7,document.write('<script src="https://www.softwebtuts.com/feeds/posts/default/?max-results='+numposts+'&orderby=published&alt=json-in-script&callback=recentarticles2"><\-e30/script>');
//]]>
</script>
  7. Save Theme/Template

Customizations in the above provided code:

In the above code replace https://www.softwebtuts.com with your own website address. Set your own number of posts to show by default is 7 and set true or false whether want to show thumbnails or not by default it is true to make it false remove ! before 0.

source:softwebtuts.com
Tags:

0 comments for Recent Posts Blogger Widget Grid Style