Cara Buat Artikel Terkait Dengan Scroll Bar

Di akhir setiap postingan saya, sobat blogger pasti melihat adanya daftar link di dalam sebuah box yang disusun berdasarkan kategori atau label. Daftar link tersebut merupakan fitur Related Article atau artikel terkait dari Serdadu Banten. Saya sengaja menggunakan Scrolling Bar untuk fitur artikel terkait ini, supaya fitur artikel terkait tidak terlalu memakan tempat di bagian blog post saya.

Untuk memasang fitur related article dengan scroll bar, sobat blogger harus memastikan dulu, apakah sobat blogger sudah membuat label buat setiap postingan blog sobat. Kalau belum, baca dulu postingan yang sudah saya publikasikan sebelumnya di sini : Cara Membuat Label Untuk Postingan. Fitur artikel terkait tidak akan muncul di blog bila sobat blogger tidak memberikan label untuk setiap postingan sobat. Buat sobat blogger yang sudah memberikan label untuk setiap postingannya, ikuti langkah di bawah ini :

Cara Membuat Artikel Terkait Scroll Bar :

• Sign In di akun blogger.com
• Pada menu Drop Down, Klik Template
• Backup Template sobat blogger terlebih dahulu.
• Kalau sudah, klik Edit Template
• Klik Proceed dan kasih tanda centang pada Expand Widget Template
• Copy Paste (Copas) kode CSS berikut :

.rbbox{border: 1px solid rgb(192, 192, 192); padding: 5px;background-color: #f0f0f0; -moz-border-radius:5px; margin:5px; } .rbbox:hover{ background-color: rgb(255, 255, 255); }

• Paste kode tersebut sebelum kode ]]></b:skin>
• Selanjutnya, copy kode di bawah ini :

<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 = 10;
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>

• Paste kode tersebut di bawah kode <data:post.body/>
• Simpan template sobat.

Penting :

1. Terdapat banyak kode <data:post.body/> pada setiap template. Kalau blog sobat blogger sudah memasang fitur Read More, tempatkan setelah <data:post.body/> yang kedua.
2. #f0f0f0 adalah kode warna background sebelum Cursor diarahkan, silahkan ganti dengan warna yang sobat blogger inginkan. Lihat kode warna disini.
3. var maxNumberOfPostsPerLabel = 4; adalah jumlah postingan untuk setiap label dan maxNumberOfLabels = 3; adalah jumlah label. Silahkan sobat blogger sesuaikan kedua kode tersebut.

Kalau sobat blogger tidak berhasil membuat fitur Artikel Terkait Dengan Scroll Bar, layangkan pertanyaan sobat blogger melalui kolom komentar yang tersedia.