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]='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};
//]]></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. 

42 Comments

  1. Finaly i got this
    thanks
    • Ispita Jolie
      Thank you for sharing
    • BloggerSpice
      you are welcome..
  2. Not Working For Me Plz Help Me
    • BloggerSpice
      It works 100% I have tested in several templates. Anyway what error is showing?? give me details...
  3. Nice widget with nice effects. Thanks for sharing.
  4. Carissa Inez
    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.

    carissa
    Flight Vintage
    • BloggerSpice
      thanks carissa..first I got your site from Pinterest..its nice and beautiful and glade to hear that my blog helped you.
  5. Ankit Singla
    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.
    • BloggerSpice
      thanks bro for your comments..can you show me an example...then I can do the coding...
  6. Unknown
    Thnx Man Great
  7. Unknown
    not working plz help us

    movie4open.in
    • BloggerSpice
      what error its showing???
  8. Unknown
    Bro,Nothing Happen.No such spaces for post appear.why??
    • BloggerSpice
      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.
    • Emaniuz
      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.
  9. Unknown
    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
    • BloggerSpice
      Hi Syed I have update the code now it won't attached the border line.
  10. Unknown
    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
    • BloggerSpice
      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.
  11. Its not showing the related posts and saying that No related posts on this article...
    • BloggerSpice
      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.
  12. Pierre Will
    I have applied the code on my blog, but it doesn't work on my blog at http://koleksifilmbagus.blogspot.com/.

    Thank you.
    • BloggerSpice
      I have checked your template its coding is different..so try to find out post body footer then apply the code from step 7...
  13. Unknown
    Thanks for sharing.
  14. this is not working for me. what to do?
    • BloggerSpice
      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.
  15. Firoz Kabir
    Hello Dear Admin, i have tried several times but, it does not work to my blog @The Textile Aid Blog . Kindly help..
    • BloggerSpice
      Your template code is little different. I have updated step 6..so try to follow. Hope it will work now.
  16. you are a great bloger of bangladesh, i like u very much
  17. Admin
    I have a related post widget already in my template . I want to remove it first . How can i removed ?
    • BloggerSpice
      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---

      .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

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

    He only appears in one of the main post.
    • BloggerSpice
      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
  19. Konstantinos omegas
    nice widget thank you
    but i had to paste it above this line.
    class='post-footer'
    class='post-footer-line post-footer-line-1
    Otherwise did not display
    • BloggerSpice
      Sometimes widget implementation method varies template to template.
  20. Heartily very thanks for this code. Actually I am looking for it.
    • BloggerSpice
      Thanks Vishal Jaiswal for your feedback.
  21. Brother! You blogger template is very responsive and SEO friendly. Never change this.
    • BloggerSpice
      Thank You. but i can't understand that you have written "Never change this"? :(
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up