Exclusive Wide Thumbnail Related Posts Widget with Moz Transition Effects

Exclusive Wide Thumbnail Related Posts Widget with Moz Transition Effects

Comments: 42
data:blog.title
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. 

Related Post

Speak Your Mind

Anonymous 5/13/2013

Finaly i got this
thanks

Hack The Hackers Idea says: 5/13/2013

Not Working For Me Plz Help Me

Mohammad Fazle Rabbi says: 5/14/2013

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

Adsense Approval Tricks says: 5/14/2013

Nice widget with nice effects. Thanks for sharing.

Carissa Inez says: 5/14/2013

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

Ankit Kumar Singla says: 5/15/2013

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.

Mohammad Fazle Rabbi says: 5/15/2013

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

Mohammad Fazle Rabbi says: 5/15/2013

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

furqan haider says: 5/25/2013

Thnx Man Great

jagbir kumar says: 6/05/2013

not working plz help us

movie4open.in

Mohammad Fazle Rabbi says: 6/05/2013

what error its showing???

vinay kp says: 6/20/2013

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

Mohammad Fazle Rabbi says: 6/21/2013

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 says: 6/28/2013

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.

Syed Ali says: 7/01/2013

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

Syed Ali says: 7/01/2013

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

Mohammad Fazle Rabbi says: 7/01/2013

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.

Anonymous 7/04/2013

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

Mohammad Fazle Rabbi says: 7/04/2013

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

Mohammad Fazle Rabbi says: 7/04/2013

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.

Pierre Will says: 7/06/2013

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

Thank you.

Mohammad Fazle Rabbi says: 7/06/2013

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

Ispita says: 7/07/2013

Thank you for sharing

Mohammad Fazle Rabbi says: 7/07/2013

you are welcome..

weblab myweblab says: 7/07/2013

Thanks for sharing.

muhammad saleem says: 7/12/2013

this is not working for me. what to do?

Mohammad Fazle Rabbi says: 7/13/2013

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.

Firoz Kabir says: 7/13/2013

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

Mohammad Fazle Rabbi says: 7/13/2013

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

Hamid khan says: 2/02/2014

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

Nilotpol Bedi says: 1/05/2015

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

Mohammad Fazle Rabbi says: 1/06/2015

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

Ana e Isa Araujo testeiEvoce says: 3/14/2015

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

He only appears in one of the main post.

Mohammad Fazle Rabbi says: 3/14/2015

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

Ana e Isa Araujo testeiEvoce says: 3/14/2015

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

Mohammad Fazle Rabbi says: 3/14/2015

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

konstantinos omegas says: 6/19/2015

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

Mohammad Fazle Rabbi says: 6/19/2015

Sometimes widget implementation method varies template to template.

Best Hindi Website says: 8/30/2016

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

Mohammad Fazle Rabbi says: 8/31/2016

Thanks Vishal Jaiswal for your feedback.

Vishal Jaiswal says: 9/01/2016

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

Mohammad Fazle Rabbi says: 9/01/2016

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

Name

Email *

Message *