Membuat Related Posts Dengan Fungsi Scroll

Disini ane akan membahas cara membuat Related Psots dengan Fungsi Scroll, jelas sekali ini memungkinkan penghematan tempat di blog kita.... Apalagi untuk saya pribadi lebih senang menggunakan Fungsi Scroll dari pada membiarkannya panjangnya kebawah.

Bagi sobat yang pengen membuat Related Posts dengan Fungsi Scroll caranya lumayan gampang, cukup ikuti instruksi yang ada :

1. Login ke Blogger dengan ID sobat

2. Pilih menu Template --> Edit HTML (ini untuk tampilan Dasbor blogger yang baru)

setiap mengedit Template yang tentunya melibatkan script, sebaiknya sobat backup terlebih dahulu template sobat, agar kedepannya bila terjadi kesalahan template sobat bisa dikembalikan dengan mengupload kembali template yang sudah didownload.

3. Centang pada Expand Widget Template lalu cari kode <p><data:post.body/></p> lalu copy dan pastekan kode dibawah ini tepat di Bawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 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>

4. Kemudian cari kode ]]></b:skin>, lalu copy dan pastekan kode berikut tepat di atas kode tadi

/*-- Related Post dengan Scroll Chumhienk's Blog--*/

        .rbbox{border: 1px solid #D8D8D8;padding: 5px;

        background-color: #e9d8eb;-moz-border-radius:5px; margin:5px;}

        .rbbox:hover{background-color: #CCFF00;}


<style>.fullpost{display:none;}</style>

5. Simpan Template, Lalu lihat hasilnya.

Catatan :

• silahkan ganti tulisan "Related Posts" dengan tulisan yang sobat inginkan
• untuk kode #e9d8eb adalah warna backgroun Related Posts, dan #CCFF00adalah warna background ketika dilewati pointer (hover). Untuk kedua kode ini sobat bisa sesuaikan dengan template sobat. Lihat tabel kode warna DISINI