Membuat Related Post Atau Artikel Terkait

Setelah berhasil membuat "related post/artikel terkait" (yang sesuai dengan label atau kategori dalam blog anda), hari ini akan diberitahukan bagaimana cara membuatnya.
Artikel ini saya adopsi dari realtrix, blog luar negeri yang cukup menarik dan informatif. Disadur ke bahasa Indonesia oleh trikblog, trima kasih boss. Juga dari gagmwkalah.
Oke langsung saja, begini caranya:

Cara Pertama

1. Silakan login ke blogger.com, masuk ke "Tata Letak" kemudian pilih "Edit HTML".
2. Beri tanda centang pada kotak "Expand Widgets Template".
3. Kemudian copy script dibawah ini:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json)
{
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++)
{
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++)
{
if (entry.link[k].rel == &#39;alternate&#39;)
{
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href)
{
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++)
{
if (json.feed.link[l].rel == &#39;alternate&#39;)
{
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label)
{

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0)
{
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels)
{
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

kalau tidak bisa(ato ada yg error download disini, buat jaga-jaga).
4. Buka filenya, kemudian copy semua script yang ada di dalamnya.
5. Di dalam script tersebut ada tulisan, “Related Posts by Categories”. Tulisan tersebut bisa diganti sesuai yang Anda inginkan, gak diubah juga gak kenapa-kenapa.
6. Setelah itu cari kode dibawah ini:

<data:post.body/>

7. Paste script tadi dibawahnya. Kemudian "Simpan Template".

Kalau cara pertama sudah berhasil, lebih baik jangan mencoba yang kedua. Entar malah error.

Cara Kedua

1. Silakan login ke blogger.com, masuk ke "Tata Leta"k kemudian pilih "Edit HTML".
2. Beri tanda centang pada kotak "Expand Widgets Template".
3. Cari script <data:post.body/>
3. Copy script di bawah ini, dan letakkan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font
color='#FFFFFF'><b:loop values='data:post.labels'
var='label'><data:label.name/><b:if cond='data:label.isLast !=
&quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType ==
&quot;item&quot;'><script
expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +
&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;m
ax-results=5&quot;' type='text/javascript'/></b:if></b:loop>
</font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

4. Setelah itu anda cari script </head>
5. Copy script di bawah ini, dan letakkan diatas kode </head>

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background :url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script

src='http://technotrixdebajyoti.googlepages.com/RelatedPostsByRealtrix.co.cc.js'type='text/javascript'/>

6. "Save Template"

Jika Anda belum berhasil mungkin Anda memerlukan bantuan dari orang lain. Atau Anda bisa sharing di artikel ini dengan mengisi form komentar, akan dijawab sebisa mungkin.