31 May 2012

Related posts widget with thumbs and hovering effect

Advertisements

Related Posts is a most wanted widget on any Blogger/WordPress blog. We already have lots of related post widgets already working on tons of blog. Now we have come with this next gen related posts widget with thumbs. When you hover mouse pointer on the thumbs the title of the post with no. of comments pop out.

Wanna add to your blog..?

STEP 1
Go to Blogger dashboard >> Design >> Edit HTML and click on Expand widget templates. Now add following code just ABOVE ]]></b:skin>

#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:1px;
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;
bottom:-40px;
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
}

STEP 2
Now look for following code (press CTRL F and paste footer-line-1)
<div class='post-footer-line post-footer-line-1'/>

Add following code just ABOVE it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Related Posts:</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>

Alternatively you can add above code just BELOW the <data:post.body/>

You can change the appearance, position and font in the STEP 1 code.

By changing the value at var maxresults=6 you can decide how many posts to show. Finally save your template.

Original codes credit

Related Posts

5 comments

June 5, 2012 at 4:45 AM

this is worked for me but i don't want images i love to show like your's blog please reply i am waiting for you
http://www.blogger-help.com/2012/05/related-posts-widget-with-thumbs-and.html

June 5, 2012 at 6:53 AM

G Raju,
Check here:
http://www.blogger-help.com/2010/05/related-posts-widget-for-blogger-based.html

June 19, 2012 at 4:13 AM

It's working, but not showing any images in the thumbnail box even though there are images in the posts. Pls hepl!!

June 19, 2012 at 6:45 AM

It's working as shown on demo site.
Please add all the codes carefully.
If still not working then let me know.

July 23, 2012 at 5:38 PM

that right sri harsha not showing any pages....
this link is useful:http://www.linkwithin.com/learn?ref=widget

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More