Exclusive Wide Thumbnail Related Posts Widget with Moz Transition Effects

Exclusive Wide Thumbnail Related Posts Widget with Moz Transition Effects
related posts

Related Post helps to increase page visit and visitors also engage longer time with blog. There are many related posts widget has already  released by many bloggers,  But I am going to share with you a awesome related posts widget which is mostly suitable for those blog who are using wide thumbnail. You would able to increase or decrease the image height and width according to your desire but Image won't become hazy, So it's amazing. In addition, I have added a Moz Transition effects on related posts image. That means when you just mouse over on image it will become little foggy. I have also added a Default image, it will display the default image if it don't find any particular Post image. This widget very easily to install. Hope you will like it. So let's proceed to the tutorial to install wide thumbnail related posts widget with Moz Transition effects.


Live Demo

Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on 
Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> and save your template


/*Related Posts Widget by www.bloggerspice.com Start*/
#bloggerspice-rp h3{
    border-bottom:4px solid #333333;
    font-family:Oswald,arial,Georgia,serif;
    font-size:18px;
    padding-bottom: 5px;
    text-transform: uppercase;
}
#bloggerspice-rp ul {margin-bottom: 20px; padding: 10px 0; }
#bloggerspice-rp ul li{
    float:left;
    height:150px;    margin:0 10px 10px 0;
    width:180px;    font-size: 15px;
}
#bloggerspice-rp img{padding:0 0;width:182px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#bloggerspice-rp img:hover{opacity:0.7;}
#bloggerspice-rp ul li:nth-child(3n+3){margin-right:0;}
#bloggerspice-rp ul{margin:0;padding:0;list-style:none;}
/*Related Posts Widget by www.bloggerspice.com End*/

Step 6 Now again find out <data:post.body/> or <div class='post-footer-line post-footer-line-1'> by Pressing  Ctrl + F

Step 7  Now Paste the below Code after/below <data:post.body/> or <div class='post-footer-line post-footer-line-1'>
   
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bloggerspice-rp'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3 class="bshborder"><span>Related Posts</span></h3></br>';rn='<h3 class="bshborder"><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/AVvXsEhIRZ2YCQbtK-4xpb49SIuASnVG-1DH4FzZmmcSqe8u2ZZyyj5HJeRb0_SQBzR7eEY4DPdlmJDGDhJrN7u-y1ezExQZ2xpaPf9EAt5SwHq1162iJW6J3fSYVecvz-AQDoERVclCSMJIKiKx/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="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s300/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></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('bloggerspice-rp').innerHTML=dw};
//]]></script>
<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=3;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
  </b:if>

Customization

  • Alter height:150px; value to change Image height
  • Alter width:180px; value to change Image width
  • Change Related Posts with Related Article if you wish 

If you face any problem to install just leave  a comment below. I will help you to install it. 
Go Up