Memodifikasi Related Post / Artikel yang Berkaitan pada Blog Blogspot

Memodifikasi Related Post / Artikel yang Berkaitan pada Blog Blogspot - Lagi-lagi saya harus me-review postingan / artikel dari blog lain. Selain karena saya tidak punya ide baru, ini juga karena permintaan sahabat saya.  Sahabat saya tersebut menemukan artikel yang menarik tentang "Cara membuat "Related Post" dibawah Posting". Setelah saya membuka postingan tersebut, rupanya itu adalah artikel sobat blogger saya yang baik :), silahkan klik di sini jika penasaran membukanya (sekedar info, "artikel terkait" yang saya pasang di blog ini juga sumbernya dari sana). 

Saya tidak bermaksud meng-copy paste artikel sobat saya tersebut, saya hanya bermaksud menjelaskan "Cara Memodifikasi Related Post atau Artikel yang Berkaitan pada Blog Blogspot", sesuai permintaan sahabat saya.  Sebelum kita memodifikasi, sebaiknya kita terlebih dahulu memasangnya di blog kita, langkah-langkahnya sebagai berikut:

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

Keterangan; 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!