Cara Membuat Related Post dengan Sroll Box, Nice!

Artikel Terkait Scroll

Cara Memasang Artikel Terkait dengan Scroll di Bawah Posting - Testimoni, baca dulu: Klik! 3 Cara Membuat Artikel Terkait atau Related Post di Blog. Tips trik ini membuat arikel terkait berbentuk scroll yang biasa mondar-mandir’ ke atas dan bawah. Kelebihan teknik scroll ini, sobat dapat menampilkan jumlah artikel terkait tiap label sebanyak-banyaknya tanpa mengganggu panjang vertikal dari halaman posting karena disiasati menggunakan scrolling. Untuk pengunjung tentu dengan leluasa dan bebas menelusuri Blog sobat.

OK, sekarang berikut tutorial cara memasang artikel terkait dengan scroll:
1. Pastikan sobat ‘stand by’ di akun Blogger, pergi ke Template dan klik Edit HTML,
2. Muncul kotak editor template, sembarang klik disalah satu kotak tersebut,
    kemudian tekan Ctrl + F, cari kode  ]]></b:skin> dan letakkan CSS
    berikut diatasnya:

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

     1. #E0F8E0 = kode warna kotak background Related Post (ganti sesuai selera sobat),
     2. #EFFBEF = kode warna kotak background 'hover' related post
          muncul pada saat disorot mouse (ubah dengan warna kesukaan sobat).

4. Cari kode <data:post.body/> atau <div class='post-body>,
    letakkan script berikut ini di bawah kode tersebut:

<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>

    Prinsipnya, meletakkan kode tersebut berdekatan dengan post-entri atau
    di bawah postingan sobat. Angka 50 berwarna biru menunjukkan jumlah artikel terkait dalam
    satu label, bisa diubah sesuai selera sobat.
6. Klik Simpan Template, dan sobat silahkan lihat hasilnya.

Sekian dulu, tips trik berikutnya:
1. Cara Membuat Artikel Terkait Sederhana Pada Blog,
2. Cara Memasang Related Post Thumbnail di Blogspot.

OK, sekarang finish. Happy blogging

Description: Cara Membuat Related Post dengan Sroll Box, Nice! Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Related Post dengan Sroll Box, Nice!