Make Related Post under Your Post

Posted by Arif Hidayatullah on Sunday, November 27, 2011

Hello Blogger Tuturials Friend... Now I'll tell you about how to make a related post under your post. it aims to allow visitors to see the articles on your blog are interlinked so that they can find things that maybe they are looking so they will comfortable in your blog and of course will increas traffic visitor in your blog.

Well... Follow the instructions below:


First, login to your blogger account > templates > edit HTML. then search this code </head> , copy and paste the following code under </head> kode.
<script type="text/javascript">
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(){var b=Math.floor((relatedTitles.length-1)*Math.random());var a=0;document.write("<ul>");while(a<relatedTitles.length&&a<20){document.write('<li><a href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
//]]>
</script>

The next step is paste the code below the above code ]]></b:skin>
/* RELATED-POSTS */
#rel-posts {font : 11px Verdana;border: 1px solid #ccc; margin-top: 20px;}
#rel-posts .widget h2, #rel-posts h2 {color : #940f04;background: #f4f4f4;font-size : 20px;font-weight : normal;margin : 0 ;padding : 5px ;border-bottom:1px solid #ccc;border-top:0;}
#rel-posts a {color : #054474;font-size : 11px;text-decoration : none;}
#rel-posts a:hover {color : #054474;text-decoration : none;}
#rel-posts ul {margin : 0;padding : 0;padding-left: 5px;}
#rel-posts ul li {line-height : 2em;border-bottom:1px dotted #cccccc;display: block;}
#rel-posts ul li:last-child{ border-bottom:none}

And the for last step,  paste the following code under this code <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rel-posts'>
<h2>Related Post</h2>
<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&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>

NB: the red word can be changed up to you.


Oke, thanks for  read my post about Make Related Post under Your Post. Don't forget to come back to this blog. Blogger Tutorial's blog.

Click the Like button above if you like this article
Thank's for visiting this blog
Don't forget to add your comments at the form below...

Share this Article to Your Friends :

{ 2 comments...Please Give Your Comments }

Edward Said said...

I've put the code according to the tutorial, but nothing shown..help me

This is my blog Tehcno Radar

HunnyBB Jiyong said...

i h=think u shud improve ur tuto by including some important pics to show the users if theyre allowed to do any randomization or wht. tq

Post a Comment

Please leave your comment here...!!!