Exclusive Wide Thumbnail Related Posts Widget with Moz Transition Effects

Exclusive Wide Thumbnail Related Posts Widget with Moz Transition Effects

Comments: 42
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;
    padding-bottom: 5px;
    text-transform: uppercase;
#bloggerspice-rp ul {margin-bottom: 20px; padding: 10px 0; }
#bloggerspice-rp ul li{
    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]='http://3.bp.blogspot.com/-ZRo8fwgs65M/UZC2jMJpcLI/AAAAAAAAC5Y/EfoFQsr1wzU/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};
<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'/>
<script type='text/javascript'>var maxresults=3;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
<div class='clear'/>


  • 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. 

Speak Your Mind

Finaly i got this

Not Working For Me Plz Help Me

It works 100% I have tested in several templates. Anyway what error is showing?? give me details...

Nice widget with nice effects. Thanks for sharing.

i must say, your site is definitely helpful. I'll find my way right here, since I often rack my brain in designing blogs of others :)
thank you.

Flight Vintage

Very beautiful widget bro.. I really like it.
Thanks for sharing this widget. Bro can you please tell me how can we add a related post that show post excerpt also.

thanks bro for your comments..can you show me an example...then I can do the coding...

thanks carissa..first I got your site from Pinterest..its nice and beautiful and glade to hear that my blog helped you.

Thnx Man Great

not working plz help us


what error its showing???

Bro,Nothing Happen.No such spaces for post appear.why??

Bro every blogger template has the code from Step-6 3 or 4 times. Try it with 2nd or 3rd code..Hope it will work. I just tested Related post widget code again with different template and it is working.

Yeah, its working. step-6 will work on the 3rd post body code. Thanks bro! I like it. will just do a little adjustment on the size to allow few more related posts.

Good widget but the border line is attached with the Related posts. I want margin b/w them Check there http://www.infotechbloging.blogspot.com

There is another problem i want to share!. the images of posts are not showing correctly. Sometimes it shows images but not the top image of post and sometimes it does not shows images

I think there are your default template coding problem. I am releasing a new template where I have used this and working fine. And before releasing this widget I have tested on 8 templates.

Its not showing the related posts and saying that No related posts on this article...

Hi Syed I have update the code now it won't attached the border line.

Ramesh code from step 6 you will find 3 or 4 times it vary template to template..try it with all then it will work.

I have applied the code on my blog, but it doesn't work on my blog at http://koleksifilmbagus.blogspot.com/.

Thank you.

I have checked your template its coding is different..so try to find out post body footer then apply the code from step 7...

Thank you for sharing

you are welcome..

Thanks for sharing.

this is not working for me. what to do?

Hi Saleem code from step 6 you will find 3 or 4 times it vary template to template..try it with all then it will work.

Hello Dear Admin, i have tried several times but, it does not work to my blog @The Textile Aid Blog . Kindly help..

Your template code is little different. I have updated step 6..so try to follow. Hope it will work now.

you are a great bloger of bangladesh, i like u very much

I have a related post widget already in my template . I want to remove it first . How can i removed ?

You have to find the Related post code. But it is complicated to give direction in Blogger comment. In your template Related Post widget code will start with---


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

I would like it to appear on all posts, initial, internal and markers.

He only appears in one of the main post.

Hi Ana.. you have to paste the code below or < div class='post-footer-line post-footer-line-1'> line. then it will display at the end of every post. Thanks

Hi!!! I put it exactly as explained and removed the line
From the home page, it only appears in 1 post

I have to check your Blog first...===testeievoce=== is it your Blog?

nice widget thank you
but i had to paste it above this line.
class='post-footer-line post-footer-line-1
Otherwise did not display

Sometimes widget implementation method varies template to template.

Heartily very thanks for this code. Actually I am looking for it.

Thanks Vishal Jaiswal for your feedback.

Brother! You blogger template is very responsive and SEO friendly. Never change this.

Thank You. but i can't understand that you have written "Never change this"? :(

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *