Cara Membuat Artikel Terkait ( Releated Post ) dibawah Posttingan

Beragam Info - pada kesempatan ini saya akan membagikan artikel yang akan mengulas tentang cara membuat Artikel Terkait yang terletak dibawah posttingan. Ini bertujuan untuk menunjukkan beberapa artikel yang terkait pada artikel yang dibaca oleh pengunjung. dan akan memberikan backlink terhadap postingan lama dan pengunjung bisa melihat poostingan tersebut walau sudah lama di publish.

Untuk membuat artikel terkait yang ada di bawah posttingan blog pun tidak terlalu sulit, kita cukup menyisipkan kode-kode yang berfungsi untuk memunculkan artikel terkait ( releated post ) tersebut. nah anda pasti penasaran gimana cara untuk membuatnya. nah untuk membuatnya silahkan anda simak langkah-langkah dibawah ini:

Sebelum membuat artikel terkait sebaiknya anda masuk terlebih dahulu pada blogger yang akan anda beri artikel terkait ( releated post )

1. login di Blogger.com
2. setelah anda login ke blog untuk kemudian silahkan anda menuju ke menu Template dan kemudian klik Edit HTML
3. kemudian klik Edit Template
4. nah sampai disini anda siap untuk megotak atik template yang anda pasang pada blog yang anda kelola. untuk mengantisipasi jika ada kesalahan pada saat pengeditan silahkan anda backUp template anda.
5. kemudian silahkan anda cari kode <data:post.body/> ada beberapa kode seperti itu dan kemudian silahkan anda pilih kode yang kedua (ke-2). Untuk memudahkan dalam pencarian silahkan anda tekan tombol ctrl+f.
6. setelah itu silahkan copi dan paste kode dibawah ini tepat dibawah kode <data:post.body/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;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 = 15;
maxNumberOfPostsPerLabel = 50;
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>

7. setelah meletakkan kode yang ada diatas untuk kemudian silahkan anda cari kode ]]></b:skin>  dan kemudian copy dan pastekan kode css dibawah ini tepat di atas kode ]]></b:skin> 

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

8. ini yang paling ditunggu-tunggu silahkan anda simpan template anda setelah selesai pengeditan dan melihat hasilnya.

keterangan:
- untuk maxNumberOfPostsPerLabel = 50; ini adalah kode berapa jumplah post atau artikel terkait yang akan ditampilkan
- untuk maxNumberOfLabels = 3; ini adalah kode untuk menampilkan jumplah label yang terkait yang ingin ditampilkan
- untuk http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png ini adalah icon didepan link untuk icon ini bisa diganti dengan sesuai keinginan anda.
- untuk background-color: #EFFBEF ini adalah kode warna background waktu disorot ( bisa anda ganti dengan kode warna sesuai keinginan anda
- untuk background-color: #F2F2F2 ini adalah warna background pada kotakan artikel terkait ( dapat diganti sesuai dengan keinginan anda )
- untuk ARTIKEL TERKAIT bisa diganti dengan tulisan sesuai dengan apa yang anda inginkan.

saya kira cukup samapai disini penjelasan dari saya bila ada kekurangan saya mohon ma'af.

selamat mencoba