Box Style recent Posts Blogger Widget

Box Style recent Posts Blogger Widget

Updated on 18 May - Post a Comment
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
    5. <!--  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="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="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-e30/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.
    6. 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.
    10. <!--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.
source:softwebtuts.com
Tags:

0 comments for Box Style recent Posts Blogger Widget