Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

Awesome Related Post Widget for Blogger

On By // 2 comments
Advertisement
Awesome Related Post Widget for Blogger
In BTNT, I've already published few related post widget in the past, It's been a while since I've published a new related post widget. Today I've designed a advanced related post widget using CSS3. It is designed on the focus of matching the Ravia theme but it can be used on any other templates, as the design can blend with other templates also.

Previously Published Related post widgets:-
Check out the Live demo for better understanding.

How To Add Related Post widget for blogger

Note:- Please create a back up of your template before you install this widget. To do this, navigate to "Template" and make a backup of your template by clicking on the "Backup/Restore" link at the top. Once the back up is over, follow these steps carefully.
  1. On the Blogger Dashboard Go to Template > Edit HTML Button
  2. Click inside the HTML Editor, Press CTRL+F (This will open a search form on the top right side of the HTML Editor)
  3. Now search for </head>
  4. Above that place the following code.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /***** Related Psots *****/
    #btnt-related-posts { display: inline-block; margin-top: 20px; padding: 40px 5%; text-align: center; width: 90%; }
    #btnt-related-posts h3 { text-align: left; }
    #btnt-related-posts ul { margin: 0; padding: 0; }
    #btnt-related-posts ul li { border-radius: 50%; display: inline-block; list-style: none; position: relative; padding: 15px; vertical-align: top; width: 33.33%; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    #btnt-related-posts ul li .rpwrap { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; }
    #btnt-related-posts li img { border-radius: 50%; display: block; width: 100%; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; }
    #btnt-related-posts li:hover img { transform: scale(1.1); }
    #btnt-related-posts li .re-titles { bottom: 35%; color: #fff; left: 0; margin: 0 auto; padding: 0 10px; position: absolute; right: 0; }
    #btnt-related-posts li .rpoverlay { background: rgba(0, 0, 0, 0.5); bottom: 0; opacity: 0; left: 0; position: absolute; right: 0; top: 0; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; } 
    #btnt-related-posts li:hover .rpoverlay { opacity: 1; }
    #btnt-related-posts li .rpoverlay:hover { color: #fff; }
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    var ry='<h3 class="related-post-title"><span>Related Posts</span></h3></br>';rn='<h3 class="related-post-title"><span>No related article available</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOIY1YgVpGrGf5j4Gtm9ekOLoGuJLoidCzGh870zwJ8iLxEEp0dt-0IsTGAnfWfRTjf_CvzYZiKhzAz3Xi_1Wsa2XwmnoeIpbulSUxzdpGpjiOYT0FpMESx0J62nbEXuBIhEbNRIp5XpS/s1600/BS+No+Image.gif '};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="rpwrap"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s300-c/")+'"/><a class="rpoverlay" href="'+urls[c]+'"><span class="re-titles">'+titles[c]+'</span></a><div class="clear"></div></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('btnt-related-posts').innerHTML=dw};
    //]]>
    </script>
    </b:if>
  5. After that search for any one of the following codes.
    <div class='post-footer'>
                  (or)
    <div class='post-footer-line post-footer-line-1'/>
                 (or)
    <div class='post-footer-line post-footer-line-2'/>
                 (or)
    <div class='post-footer-line post-footer-line-3'/>
  6. After finding any one of the above code, Paste the following code after it.
    Note:- If you're using Ravia theme (Which is shown in the demo) search for <div class='post-footer-line post-footer-line-2'/> code and place the following code after it.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='btnt-related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </div>
    </b:if>
  7. Now save your template. That's All. ;)
Kindly Let me know your feedback about this theme in comments and please Share it with your friends. ;)

2 comments:

  1. Hi Chandeep,

    Great widget buddy! Definitely gonna try it on one of my blog.

    Thanks for sharing!

    Regards,
    Vinay Katiyar

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep