Cara Membuat Related Post dengan Scroll

 

Tutorial pada kesempatan kali ini adalah Cara Memasang Related Post (Artikel Terkait) dengan efek hover dan Scroll yang Keren. Sobat blogger pastinya sudah pernah lihat daftar artikel terkait di bawah postingan. Yang dimaksud dengan efek hover adalah sebuah efek yang terjadi ketika mouse/kursor menyentuh sesuatu yang sudah diberi hover. Artikel terkait yang akan dibuat yaitu dengan tambahan scroll dan efek hover. Scroll berguna untuk menghemat tempat. Jika daftar artikel terlalu panjang maka dengan scroll sobat bisa menampilkan berapapun jumlah posting dan menghemat tempat. Oke, kita langsung saja ke caranya..

Cara membuat Artikel Terkait (Related Post) Keren:
1.  Login ke blog sobat.
2.  Pergi ke Template, klik Edit HTML
3.  Di kotak editor template cari kode berikut (gunakan Ctrl + F):

]]></b:skin>

4.  Letekan kode berikut di atas kode ]]></b:skin>

/* Artikel Terkait */
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

Keterangan:
#D8D8D8 adalah kode warna border/garis
#E0F8E0 adalah kode warna background
#EFFBEF adalah kode warna background saat disentuh kursor.

5.  Setelah itu cari kode berikut:

<data:post.body/> atau <div class='post-body>

6.  Letakkan kode berikut dibawah kode terebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H4>Related Post:</H4>
<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 = 5;
var maxNumberOfLabels = 10;
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>

Keterangan:
Angka 200 adalah tinggi kotak
Angka 50 adalah jumlah maksimum artikel dalam satu label

7.  Klik Simpan Template.

Sebelum di simpan, sebaiknya di pratinjau dulu. Jika berhasil silakan disimpan/save dan Artikel Terkait sobat sekarang sudah jadi.
Selamat mencoba dan semoga berhasil..