Cara Membuat Artiket Terkait Dengan Scroll Bar (eghooy main blog)

Di akhir setiap postingan saya, sobat Eghooy Main Blog 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 Eghooy Main Blog. Saya sengaja menggunakan Scrolling Bar untuk fitur artikel terkait ini, supaya fitur artikel terkait tidak terlalu memakan tempat di bagian blog post saya.

Artikel Terkait: kasi Blackberry Download BlackBerry Master Control Program (MCP) Terbaru 2013 (eghooy main blog) Cara Install Bahasa Indonesia di Blackberry Terbaru 2013 (eghooy main blog) Tips 15 Cara Menghemat Baterai Pada Blackberry Terbaru 2013 (eghooy main blog) Auto Text BB ( Emoticon BB) Terbaru 2013 (eghooy main blog) Download Gratis 1000 Autotext BlackBerry Terbaru (eghooy main blog) Kumpulan Autotext Blackberry BB Lucu Terbaru (eghooy main blog)

Read more at: http://www.daftar-harga-handphone2013.blogspot.com/2012/12/auto-text-bb-emoticon-bb-terbaru-2013.html
Sumber https://daftar-harga-handphone2013.blogspot.com...

Untuk memasang fitur related article dengan scroll bar, sobat blogger harus memastikan dulu, apakah sobat blogger sudah membuat label buat setiap postingan blog sobat. Fitur artikel terkait tidak akan muncul di blog bila sobat blogger tidak memberikan label untuk setiap postingan sobat. Buat sobat Eghooy Main Blog 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 HTML
• 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 : var maxNumberOfPostsPerLabel = 4; adalah jumlah postingan untuk setiap label dan maxNumberOfLabels = 3; adalah jumlah label. Silahkan sobat blogger sesuaikan kedua kode tersebut.

Semoga Bermanfaat :)