Exclusive Wide Thumbnail Related Posts Widget with Moz Transition Effects
Exclusive Wide Thumbnail Related Posts Widget with Moz Transition Effects
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.
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 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 == "item"'>
<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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=3;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</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.
40 comments
thanks
thank you.
carissa
Flight Vintage
Thanks for sharing this widget. Bro can you please tell me how can we add a related post that show post excerpt also.
Thank you.
.spicy-rl-post
and also delete code where written---
Related Post Widget for Blogger by Taufik Nurrohman modified by Mohammad Fazle Rabbi
Comment box doesn't support whole HTML code
He only appears in one of the main post.
but i had to paste it above this line.
class='post-footer'
class='post-footer-line post-footer-line-1
Otherwise did not display