Related Posts With Title & Comments Hover Effect

Add Related Posts With Title & Comments Hover Effect

1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Now click on Expand Template Widgets check box.

4. Search for below code in your Template. More Info On: "How To Find A Code In Blogger Template".

]]></b:skin>

5. Paste the following CSS code Before it.

/* Related Post Widget by www.ravisaive.in */

#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}

6. Next find the below code in your template.

<data:post.body/>

7. Past the following code just After 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>

8. Save your template and view your blog. You must see a related posts widget appearing in your blog. 

3 Simple Ideas to Make Money Online for Beginners

1. Sell Photos - Start selling your photos on freelance photography selling sites, such as Shutterstock and iStockPhoto. You don’t need to be a professional photographer, to start making money. People always need images for websites, presentations, brochures, personal blogs.

People are mostly just looking for the suitable picture for their content, giving all photographers an even chance to earn commissions from their uploaded photos. As with other simple ideas to make money online, do it on a higher volume, and publish many photos, in order to generate a more significant amount of income.

2. Writing - Many online businesses need articles and additional posts for their blogs, to get more exposure and maximize their profits. For writing articles, start from a freelance site, such as iFreelance or Scriptlance. Great freelance blogging jobs can be found on different specialized sites, such as BloggerJobs.biz and FreelanceWritingGigs.com.

Writing is a one of the most simple ideas to make money online, since it requires you to have no website to get started with. You don’t even have to be an experienced writer, making it possible to improve your article writing skills on the go. Expect to make less as you first start out. But as you gain experience, it is possible to charge more for your service.

3. Sell eBooks - There are prewritten eBooks out there, which you can buy and then resell as yours, at no additional cost. This makes it one of the most simple ideas to make money online, since you need to have no product of your own. It is possible to sell them either on your own website, or on popular eProduct merchandising sites, such as eBay, Amazon, and ClickBank.

To increase your earnings, start writing and selling your own eBooks, which provide valuable information on a certain topic. Writing eBooks is much more simple than publishing a traditional printed book, and there are online training programs, which guide you through the process of creating and selling such eproducts.

Three simple ideas to make money online are, selling photos, writing, and selling eBooks. Although they are all easy to follow concepts, and there are online training programs which show you the whole process step-by-step, the most important factor of success is to focus on one opportunity, and to keep taking action every day. Earning income online is a bit different than going to a regular job. It might take a while till you see the first results and get used to this type of money making opportunity.