Related posts widget with title and comments number hovering effect


In today tutorial I will show you how to add a related post widget bellow your post. I received many comments about this so finally I decided to post the tutorial. It a very nice widget with a little hover effect meaning when you hover on a related post it will show both the title and the comments number you have received on that post. You can see a demo on my blog just scroll to the bottom of this post.

How to create nice related post widget?


1. Log in to your Dashboard--> Template- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

/* Related Post Widget */

#related-posts{
float:left;
height:160px;
margin-bottom:10px; 
outline: 1px solid #fff;
border: 1px solid #ddd;
background: #f9fafb;
}

#related-posts h3{
    font-family: Francois One;
    font-size:20px;
    font-weight:400;
    color: #222222;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    margin-left: 0.5em;;
    padding-top: 0em;
}

#related-posts ul{
margin:5px;
width:613px;
padding-left:17px;
list-style:none;
display:block;
}
#related-posts ul li{
list-style:none;
position:relative;
float:left;
border:0 none;
margin-right:11px;
padding:2px;
width:86px;
}


#related-posts ul li:hover{z-index:100}
#related-posts ul li:hover img{border:3px solid #BBB}


#related-posts ul li:hover div{
font-size:7px;
text-transform:capitalize;
position:absolute;
top:20px;
left:-15px;
margin-left:0;
width:130px
}
#related-posts ul li img{
border:3px solid #DDD;
width:80px;
height:80px;
background:#FFF;
display:block;
}
#related-posts ul li div{
position:absolute;
z-index:99;
margin-left:-999em
}
#related-posts ul li .title{
text-align:center;
border:1px dotted #CCC;
background:#fff;
padding:5px 10px
}



You can play with the values on the CSS to align better in your page , or to change the dimension of the widget, change the font etc.

4. Find the  <data:post.body/> and after it paste the next code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Other Tutorials For You To See:</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=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;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};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]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=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){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.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(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').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=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear both'/>
</b:if>


Save your template and see the result.

Get Latest Updates For Free!

Subscribe via Email

25 comments

January 5, 2012 at 1:52 PM

Thanks for you tutor !!
I like it :)
and visit back my blog...

January 5, 2012 at 2:49 PM

Thank you very much admin to reply to my request and for your generosity

January 5, 2012 at 3:18 PM

@AdministrateurGlad I could help you.

Very cool..

I want to try it..

thanks master

January 6, 2012 at 1:38 AM

Hi, the widget does not work.

Rather, it works but not as it should.

Nose if you can fix it according to my template. If you can put color and that, and that nose to do ....

Please tell me if you can make your.

You pass the blog for you to see http://titulomayor.blogspot.com

I hope you can help me ... thanks

January 6, 2012 at 9:45 AM

@MohamedtSend me the template.

January 6, 2012 at 10:39 AM

lookin good nice widget now i am going add this thing into my blog

January 6, 2012 at 12:58 PM

thanks for share dude @_@

January 6, 2012 at 5:32 PM

@ArtisTutor
I send the template.

Thanks

January 9, 2012 at 8:54 AM

@Mohamedthi, i send you my template some days ago, were you able to do some changes to it?

Thanks

January 9, 2012 at 10:06 AM

@MohamedtYes, I send it back to you .

Anonymous
January 18, 2012 at 12:05 PM

Hi admin
How do I make my first post look different from the rest
thanks a lot...

February 16, 2012 at 7:21 PM

how do I change the script, if I just want to show 4 post in the widget.?

February 16, 2012 at 7:51 PM

@AriezFind var maxresults=6 and replace 6 with 4

February 17, 2012 at 6:21 AM

please post the demo for your every tutorial. thanks

March 22, 2012 at 3:56 PM

Thanks so much. I have added many features to my blog with help of your tutorials.

I can't find

I use blogspot.

Tanya

July 8, 2012 at 1:54 PM

hey how to change the width......

August 24, 2012 at 3:43 PM

Thanxs...

September 19, 2012 at 5:43 PM

I really loved this.

How to filter current post we are viewing from related posts results.

e.g. If we are viewing
http://bollypicnic.blogspot.in/2012/08/sherlyn-chopra-featuring-on-cover-of.html

How to prevent this post from appearing in Related posts results.

September 22, 2012 at 5:27 PM

cool, it's very simple and fast load :D

November 18, 2012 at 8:27 PM

Another amazing tutorial!! Thanks a lot

January 15, 2013 at 1:22 PM

thanks brother it worked perfect.

January 20, 2013 at 8:58 PM

Hello!
Got lost on the feet, on the Internet search.
But could not find this widget.
I have in dlogspot are two of your widget http://www.b-f.com.ua/ , I'm very satisfied with them, thank you. But now I am mastering the word pres? and would very much like to put there your widgets, Other Tutorials For You To See: and Popular Posts. Could you help with the code for WordPres, and at the same time supporting where to insert. Template зделан on Artisteer 4.0.0.58475.За previously thank you very much.
Yours Sincerely Vladimir

January 20, 2013 at 11:49 PM

@VladimirThis tutorials are only for Blogger. They don't work on WordPress.

February 26, 2013 at 3:37 PM

thanks gan, bermanfaat sekali

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers