Box Style recent Posts Blogger Widget
close
 Box Style recent Posts Blogger Widget

Box Style recent Posts Blogger Widget

 Box Style recent Posts Blogger Widget

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
  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="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 -->
    
  6. Now search for </head> and paste the above code just above this tag.
  7. To Search anything in blogger Press Ctrl + F and type or paste the term to search in search bar.
  8. Save Theme / Template
  9. Now go back to Layout Section In your blogger dashboard.
  10. just below main widgets section click on Add New Widget
  11. Copy the code provided below and paste it as widget content.
  12. <!--Box Style Recent Posts Blogger Widget-->
    <div class="wrapper">
    <section class="box-container authors" id='recent-posts'/></div>
    <!--/Box Style Recent Posts Blogger Widget-->
  13. 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.
Disqus Codes

No comments

Notifications

Disqus Logo