Cara Mudah Membuat Artikel Terkait Dengan Scrool

Membuat Artikel Terkait Dengan Scrool

Malam ini saya akan berbagi tips tentang bagaimana cara membuat artikel terkait yang menggunakan Scrool di bawah postingan blog.. bagaimana caranya langsung aja ke topik permasalahan :

Berikut Tahap-tahapnya:

1. Login Ke Akun Blogger Anda

2. Pilih Rancangan

3. Kemudian Klik Edit HTML

4. Jangan lupa Centang Expand Template Widget

5. Cari Kode ini :   <data:post.body/>  Gunakan CTRL+F agar pencarian lebih mudah

6. Jika Anda telah menggunakan Readmore akan Terdapat 2 buah kode <data:post.body/>  

7. Copy Paste Script di bawah ini setelah kode <data:post.body/> yang kedua jika anda telah menggunakan fungsi readmore, jika belum cukup di bawah kode yang pertama :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</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 = 9999;
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>

8. Selanjutnya Letakkkan Kode Script Berikut :

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

9. Save/ Simpan Dan Lihat Hasilnya

Keterangan Kode :1. Tulisan Artikel Terkait Silahkan Ganti Jika anda punya ide sendiri

                              2. Ganti Kode Warna :D8D8D8 : Warna Border (Kotak)

                                                                  E0F8E0  : Warna Backgroundnya

                                                                  EFFBEF : Warna Background pada saat di sorot Mouse

Jika anda berhasil akan terlihat seperti screen shoot di bawah ini ;

Semoga bermanfaat bagi para blogger pemula seperti saya...hehehe...