Cara Memasang Related Post di Bawah Postingan

Kali ini kita akan membahas cara membuat related post yang cukup fungsional, efektif dan menarik bagi blog kalian. Fungsi dari pada related post sebetulnya sangat banyak dan bermanfaat sekali dalam menambah jumlah pageviews sebuah blog. Semakin banyak visitor yang membuka halaman blog melalui related post maka akan semakin banyak pula pageviews yang artinya semakin memperbesar kemungkinan terjadinya klik adsense pada blog kalian. Secara fisik memang penampilan related post sungguh menarik, namun jangan dinilai dari sisi estetikannya saja melainkan fungsi dan kegunaan serta manfaatnya yang jauh lebih dari sekedar kata menarik. Mungkin buat para sobat Blogger yang kebetulan belum memakai Tutorial ini barang kali bermanfaat buat Anda, baiklah saya tidak akan panjang lebar bicara masalah Tutorial ini, sebab saya sendiri juga masih pemula. ok silahkan di coba.....


Berikut langkahnya..

 - Log in  ke blogger anda
 - Masuk ke Template > Edit Html
 - Centang Expand Template Widget
 - Tekan Ctrl + F, lalu cari kode <data:post.body/>
 - Copy kode dibawah ini dan pastekan dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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;albri&#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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

- Bagi kamu yg sudah memasang Readmore otomatis. cari kode <data:post.body/></b:if> lalu letakkan kode diatas diantara kedua kode tersebut.

<data:post.body/>Letakkan kode diatas disni</b:if>

- Seterusnya cari lagi kode : ]]></b:skin> , kemudian copy kode dibawah ini dan letakkan diatasnya.

rbbox{border:1px solid #F00; padding:5px; background-color:transparent; -moz-border-radius:5px; margin:5px}
.rbbox:hover{background-color:transparent}

- Setelah itu simpan template kamu dan lihat hasilnya.

Sumber : http://rizky-4rt.blogspot.com