Having related posts displaying at the bottom of every post on your blog is very good for SEO purposes. They can have an effect on your page ranking on Google Search Engine, increase your traffic drastically, get more insights on post that are not even that relevant.
One thing with related posts is that if you know how to use your label very well, then you have your then your have a better chance in ranking than others who does not know how labeling and tags works. You get an increase in internal backlinks which is good for crawlers.
If you notice, Yahoo Answers always have the perfect category for all posts and some related posts. With more posts, their ranking goes higher and that is why the website is at the top of ranking. What I am trying to say is that if you have a well written code to display related posts like the one I am going to be giving you today, then all you haveto do is learn how to use labels and post as many topics as you can.
A post has to have a correct label, and there is a way to find out if you have the right label for your related posts to gain more benefit from search engine crawlers. Enter a search query for the topic you are writing on, or just make a search of the topic on Yahoo Answers or it's related websites and check out the label or tag name of similar post to your topic.
Benefits Of Related Posts
I have mentioned some benefits above, but I will make it in a bullest list so that you can have a glance at it at once.- Increase in Ranking
- More internal links
- Insights to other posts
- Blog confidence
- Navigation help for visitors
- To backup your template, Login to your Blogger Dashboard.
Go to Template. At the upper right hand corner of your screen, you will see a Backup/Restore button there. Click on it and download your template. If any preblems comes up in the process of implementing this related post widget, go back to click on that same button and upload the .xml template you downloaded earlier.
Adding Related Posts Widget
The part has come. Now follow the steps to add it to your own blog.- Step 1. Enter your template HTML editor. Click on the box and use crtl + F to search for the </head> tag. Paste the below code directly above the tag.
<!--Earcontra.com Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts h2{margin-top: 40px; background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:0px;border:2px solid #f2f2f2;width:209px;height:120px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300msms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#related-title {font:12px Oswald, sans-serif; color:#666;text-align: center; width:203px; height:40px; padding: 0px 5px 10px 5px;}
</style>
</b:if>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCMn7cDMHf_eDZG5hpUfD_e1BfM8AtuTOYt92FiytHow9eT0fMQTeWwEyVBtqriflwt7Z72J4nP6XSsj37TnOMqr36hYpya4OeHq_39xl02uDu9j3v8uUuqV2UdWX5WQbve1FobPT5W-bH/s1600/no-thumbnail.png";showRandomImg=true;aBold=false;summaryPost=400;summaryTitle=40;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCMn7cDMHf_eDZG5hpUfD_e1BfM8AtuTOYt92FiytHow9eT0fMQTeWwEyVBtqriflwt7Z72J4nP6XSsj37TnOMqr36hYpya4OeHq_39xl02uDu9j3v8uUuqV2UdWX5WQbve1FobPT5W-bH/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<40&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 0px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<!--Earcontra.com Related Posts with thumbnails Scripts and Styles End-->
- Step 2. Search for <div class='post-footer'> tag. There are more than one of that tag, what you are looking for is the second one. After typing that tag in there search of your HTML editor, press enter twice. It should take you to the second tag. If you found the tag, skip to step 4.
- Step 3. If you cannot find the second tag, search for <b:if cond='data:post.authorAboutMe'> tag.
- Step 4. If you found any of the tags above in step 3 and step 2, then paste the below code direclty above any of the tag you found.
<!--Earcontra.com Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="<b>Related Posts</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!--Earcontra.com Related Posts with Thumbnails Code End-->
- Step 5. Save your template.
Customizations
You can always change the fields in bolded red to your choice.
If you have a problem, use the comment box. I will help you. Also, don't forget to share this post is it helped you.
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.