Box Style recent Posts Blogger Widget

By softweb tuts Saturday, 2 March 2019

Share Tweet Share Share Email

Hello friends today I am going to share with you a recent posts blogger widget in this widget looks amazing. This is simple box style recent posts blogger widget.

I have created this box style widget to get recent posts but if you want to make this widget to get random posts, popular posts, related posts or featured posts you can comment me I will try to make that widget for you in this box style recent post blogger widget.

Search you want to add this box style recent posts blogger widget in your blogger blog follow the steps provided below:

Steps to make Box Style recent Posts Blogger Widget:

1. Go To Blogger Dashboard
2. Then Go to Theme / Template
3. Click Edit HTML Button
4. Now copy the code provided below

<!--  Box Style Recent Posts Blogger Widget --><style>
.box-container {
  width: 100%;
 overflow:hidden;
  vertical-align:center;
}
.box {
   max-height:30%;
    max-width: 30%;
    padding: 10px;
   display: inline-block;
}
.credit{position:absolute;z-index:999999;margin:4px 5px;background:tomato; padding:0 4.5px .5px;color:#fff;border-radius:50%;text-align:center;opacity:0.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;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 99999999;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}
.credit .tooltiptext strong{color:black;font-weight:200;border-bottom:1px dotted black;}
.credit .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent tomato transparent;}
.credit:hover .tooltiptext {
  visibility: visible;
}
.box a:not(.credit) {
    display: block;
    border: 1px solid #E3E9ED;
    position: relative;
    color: #69E781;
    text-decoration: none;
    transition: color 0.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 300ms ease-in-out;
}
.box.box--author footer {
    background-color: #194c80;
}

.box footer {
    padding: 0 12px;
    color: #fff;
    position: relative;
    height: 56px;
    line-height: 56px;
 display: block;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow:ellipsis;
}
.box footer .avatar {
    width: 34px;
    height: 34px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
 border-radius: 100%;
    background-size: 100%;
}
.box .name {
  text-transform: capitalize;
  width:10px;
  font-size:13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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;
    display: inline-block;
    font-size: .75em;
    font-weight: 600;
    line-height: 1;
    padding: .4em .6em;
    vertical-align: middle;
}@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>
<!--  Box Style Recent Posts Blogger Widget -->
<script>
var rcp_website = 'https://www.raufgraphics.com';  //Your website Your
var rcp_numposts=3;  //Number of posts to show
var rcp_snippet_length=150; //snippet length
var rcp_info='yes';  //show info yes / no
var rcp_comment='Comments';  //text eg: Comments
var rcp_disable='Read More'; //Read More Text
var rcp_thumbs_wid = 400; //Post Thumbnail Width
var rcp_thumbs_hei = 190; //Post Thumbnail Height
var rcp_ytthumbsize = 0; //Youtube video thumbnail values 0, 1, 2, 3, maxresdefault, default, hqdefault
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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};
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="https://www.softwebtuts.com" 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/photo.jpg" alt="Author" title="Author" 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>
<!--  Box Style Recent Posts Blogger Widget -->

5. Now search for </head> and paste the above code just above this tag.

To Search anything in blogger Press Ctrl + F and type or paste the term to search in search bar.

6. Save Theme / Template
7. Now go back to Layout Section In your blogger dashboard.
8. just below main widgets section click on Add New Widget
9. Copy the code provided below and paste it as widget content.

<!--Box Style Recent Posts Blogger Widget-->
<div class="wrapper">
<section class="box-container authors" id='recent-posts'/></div>
<!--/Box Style Recent Posts Blogger Widget-->

10. Save Widget

Replacements in the above codes:

In the code provided above you have to make some changes so that this widget will work on your blog perfectly as you want.

Replace highlighted stuff to your own.

See the above code some text is highlighted and the description of that code is given in comments green text after that highlighted text.

Conclusion:
That's pretty much in today's tutorial and I think this post help you a lot. Keep visiting this site for more beautiful and stylish blogger widgets.

If you want widget in your created style please send me the image in the comment section i will try to transform my widgets in that style.

softweb tuts

Hello! My name is Muhammad Muzammil & i am the owner at softwebtuts and author at raufgraphics. Sharing knowledge is my passion designing and programming is my hobby!