Box Style Recent Post Blogger Widget

So as before I have publish many blogger widgets and I have told you the methods in that posts so like them this post is going to be similar to them you have to follow the steps provided below to make this box style recent post blogger widget your's.

Follow these steps to make box style recent post blogger widget:

There are two methods of adding this widget in your blogger blog.
I have simplified the things for you and made them easy.

Method 1:

1. Go to blogger.com
2. Go to Layout Section
3. Click Add Widget.
4. Create HTML/Javascript Widget.
5. Copy the code below and paste it as widget content.

Method 2:

1. Go to blogger.com
2. Go to Theme / Template Section
3. Click on Edit HTML
4. Now search for <data:post.body/>.

You will find this code three to four times but you have to check which one is correct in my case it was at third place.

5. Now copy the code provided below and paste it right after the code which we have founded in Step 4.
6. Save your Template/Theme now go and have a look on it.

Blogger Widget Code:

<style>
.credit,.credit .tooltiptext{position:absolute;text-align:center}.box .name,.box footer{text-transform:capitalize;overflow:hidden;text-overflow:ellipsis}.box-container{width:100%;overflow:hidden;vertical-align:center}.box{max-height:30%;max-width:30%;padding:10px;display:inline-block}.box a:not(.credit),.box footer{display:block;position:relative}.credit{z-index:999999;margin:4px 5px;background:tomato;padding:0 4.5px .5px;color:#fff;border-radius:50%;opacity:.1;text-decoration:none;transition:.3s opacity}.credit:hover{opacity:1}.credit .tooltiptext{visibility:hidden;width:120px;font-size:10px;background-color:tomato;color:#fff;border-radius:6px;padding:5px 0;z-index:99999999;top:150%;left:50%;margin-left:-60px}.credit .tooltiptext strong{color:#000;font-weight:200;border-bottom:1px dotted #000}.credit .tooltiptext::after{content:" ";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent tomato}.credit:hover .tooltiptext{visibility:visible}.box a:not(.credit){border:1px solid #E3E9ED;color:#69E781;text-decoration:none;transition:color .1s linear}.box.box--author .img-holder{height:180px}.box .img-holder{text-align:center;position:relative;background-color:#fff;height:300px}.box .img-holder img{display:block;margin:auto;height:inherit;width:100%;overflow:hidden;transition:transform .3s ease-in-out}.box.box--author footer{background-color:#194c80}.box footer{padding:0 12px;color:#fff;height:56px;line-height:56px}.badge,.box footer .avatar{display:inline-block;vertical-align:middle}.box footer .avatar{width:34px;height:34px;margin-right:6px;border-radius:100%;background-size:100%}.box .name{width:10px;font-size:13px;white-space:nowrap}.col--center{-webkit-align-self:center;-moz-align-self:center;align-self:center;-ms-flex-item-align:center}.box.box--author footer .badge{background-color:#113255}.badge{background-color:#0E2A47;border-radius:3.75em;color:#fff;font-size:.75em;font-weight:600;line-height:1;padding:.4em .6em}@media (max-width:828px){.col--center,.computer img.avatar{display:none}.box .name{text-align:center;width:100%;font-size:100%}}@media (max-width:636px){.box{width:inherit;height:auto;display:inline}.col--center,.computer img.avatar{display:none}.box .name{text-align:center;width:100%;font-size:100%}}
</style>
<div class="wrapper">
<section class="box-container authors" id='recent-posts'/></div>
<script>var rcp_website = 'https://www.raufgraphics.com';
var rcp_numposts=3;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='Read More';
var rcp_thumbs_wid = 400; 
var rcp_thumbs_hei = 190; 
var rcp_ytthumbsize = 0;
var rcp_title = 'yes'; 
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnSRU6q83KwFDKNPvtMhBjsFcHK7TMZUyuKPm21uYUZUhjNBYwgmPJkLlngxAvKUZnNAK4vqhxeR24NVHddATcRuoP8tAUV1jDztjvchqiEYMb1PVLFTAqQn4pGlsqBFzlea9xxBe6n7rl/"};}};
var imagesize = rcp_thumb.replace("/s72-c/","/w"+rcp_thumbs_wid+"-h"+rcp_thumbs_hei+"-c/").replace("/default.jpg", "/"+rcp_ytthumbsize+".jpg"); 
dw+='<article class="box box--author">';
dw+='<a href="" class="credit">ⓘ<span class="tooltiptext">This widget is made by <strong>M.Muzammil</strong></span></a><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_posttitle+'">';     dw+='<div class="img-holder"><img alt="'+rcp_posttitle+'" src="'+imagesize+'"/></div><footer><div class="row"><div class="col computer"><img src="https://lh3.googleusercontent.com/-k-5B7Alihms/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfR9ebmEst5W7FeDbTTYtInpf_dbg/s64-b8-cc-rp-mo-e30/photo.jpg" alt="Rauf Graphics" title="Rauf Graphics" class="avatar" width="34" height="34"/>';
if(rcp_title=='yes'){dw+='<span class="name">'+rcp_posttitle+'</span>';}
dw+='</div>';
if(rcp_info=='yes'){dw+='<div class="col--center"><span class="badge">'+rcp_commentsNum+'</span></div>';
dw+='</footer>';}
dw+='</a></article>';}
document.querySelector('#recent-posts').innerHTML=dw;};
document.write('<script type=\"text/javascript\" src=\"'+rcp_website+'/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');</script>

As before I provide you the chance to edit your widgets same is here you can also added or customise this widget as you want here are the list of customizations that you can make in this box style recent post blogger widget.

Box Style Recent Post Blogger Widget Customization:

var rcp_website = 'https://www.raufgraphics.com'; change this website name to your own website simply leave it blank.

var rcp_numposts=2; change this w with the number of posts you want to show as the recent posts in this Gallery Style Recent Post Widget for blogger.

var rcp_info='yes'; you can toggle between show info awesome please show the thumbnails if it is set to true then you will see a post title another text but if it is false or set to no or any other word you cannot see all this visit will not show you information about post.

var rcp_thumbs_wid = 300; change this 300 to the size of your thumbnail higher the thumbnail size will give you HD quality thumbnail but it will make your website slow.

var rcp_thumbs_hei = 190; changes 190 with the height of your image recent post thumbnail. I recommend you no to change the width and height of the thumbnails of this Gallery Style Recent Post Widget for blogger.

var rcp_ytthumbsize = 0; this 0 is for YouTube thumbnails for example if you have published a video on your blog and but the force that thumbnails are blur for YouTube video by changing this value you can make that thumbnails in HD resolution. For this possible values are maxresdefault, hqdefault, sddefault, and default.

var rcp_title = 'yes'; change this yes to no if you don't want to show the number of comments and published date.

Replace <img src="https://lh3.googleusercontent.com/-k-5B7Alihms/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfR9ebmEst5W7FeDbTTYtInpf_dbg/s64-b8-cc-rp-mo-e30/photo.jpg" alt="Rauf Graphics" title="Rauf Graphics" class="avatar" width="34" height="34"/> with your own data.

You are all done you have just created box style recent post blogger widget and added it into your blog I think this article was very very helpful for you if it is, leave your feedbacks in the comment section. below.