Related Post With Scrool Function

Dari Gambar di atas tentu anda telah mengenal Tentang Widget Related Post. Berbeda dengan related Post yang biasa tampak panjang kebawah, Kali ini kita berupaya untuk membuat widget tersebut menjadi menarik !!

Dari gambar tampak ada scroll yang bisa dinaik-turunkan untuk melihat posting-posting yang terkait (berdasakan kategori). Baiklah, mari kita mulai bagaimana cara Membuat Widget Related Posts Dengan Fungsi Scrolling di bawah Posting Blog anda.

1. Login ke blogger anda
2. Dari Dasebor, Klik  Tata Letak
3. Pada tab menu, pilih Edit HTML
4. Centang kotak kecil Expand Template Widget 
5. Cari kode <p><data:post.body/></p>

Letakkan kode berikut 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>

    6. Jika sudah, sekarang cari kode ]]></b:skin>
    7. Letakkan kode berikut di bawah kode tadi :

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

Note :
Ubah kode yang bertanda sesuai dengan warna blog anda, Jika anda belum tahu kode warnanya, Silahkan check pada Kode Warna HTML

#D8D8D8 : Warna Tepi (border)
#E0F8E0  : Warna Background
#EFFBEF : Warna Background juga, namun akan nampak saat box disorot dengan pointer

    8. Lalu Klik Simpan Template

-----------------------------------------------------------------------

Permasalahan bagi Pengguna Readmore :

bagi anda pengguna fasilitas Readmore maka anda terkadang melihat Widget Related Post juga muncul pada Halaman Home anda, Jika anda hanya menginginkan Related Post tersebut hanya muncul pada halaman Postingan ! Maka Inilah solusinya !!!!

    1. Cari kode <data:post.body/>
    2. Kemudian lihat gambar ini.

    Saat anda memcari kode <data:post.body/> maka anda menemukan terdapat 2 kode pada template anda (biasanya ada pada blog pengguna readmore)

Yang diberi lokasi warna hijau merupakan script Readmore !

Maka anda harus mengcopy - paste kode Html pada kode pencarian <data:post.body/> yang kedua (yang bukan gabungan script readmorenya)

    3. Lalu Simpan Template

Semoga bermanfaat, Jika Ada yang Ditanyakan Silahkan tanya di Form Komentar !!!

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :