Memodifikasi Related Post / Artikel yang Berkaitan pada Blog Blogspot

1. Login ke account blogger sobat,
2. Pada dashboard, pilih edit layout atau Rancangan –> edit HTML
3. Centang Expand widget template

4. Cari kode seperti ini: <p><data:post.body/></p>
5. Lalu paste kode berikut tepat dibawah kode tersebut diatas :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<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 = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 15;
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>

6. Simpan Template Sobat

"Memodifikasi Related Post atau Artikel yang Berkaitan pada Blog Blogspot"

Setelah kode di atas (nomor 5) terpasang, langkah selanjutnya adalah memodifikasinya. Caranya sangat mudah, perhatikan kode yang berwarna Merah dan Biru di atas kemudian lihat keterangannya di bawah ini:

Artikel Terkait:= Bisa diganti dengan "Related post" atau tulisan lain yang diinginkan
margin:0; = batas pinggirnya berapa, kalau saya menggunakan 0
padding:10px; = jarak dari pinggir, jika sobat perhatikan pada blog saya ini, kotaknya agak sedikit ke dalam, nah, itulah fungsinya.
height:150px; = Ketinggiannya berapa, bisa diganti dengan 100, atau sesuai keinginan
overflow:auto; overflow maksudnya, jika isi related post lebih panjang dari kotak, maka secara otomatis akan berubah jadi model scroll
border:1px = ini maksudnya garis pinggirnya, ketebalan berapa, bisa 2, bisa juga 3
solid = ini adalah kode untuk membuat garis lurus, jika ingin berubah menjadi garis putus-putus, ganti kode tersebut dengan "dotted"
#ccc = ini adalah kode warna garis pembatasnya, bisa diganti dengan warna lain dalam bahasa inggris, misalnya black, white, red, dan seterusnya.
maxNumberOfLabels = 15; = ini adalah jumlah label atau kategori yang akan dimunculkan, boleh 7, 8, 10, sesuaikan dengan jumlah kategori atau label pada blog sobat.

Nah, Sampai di situ tampilan related post kita sudah dapat kelihatan cantik, sobat juga dapat melakukan atau menambahkan kode yang lain. Semoga bermanfaat!