membuat articel scrool bar

         Ada beberapa cara dalam membuat Artikel Terkait,didalam postingan ini penulis akan coba membuat Artikel terkait dengan menggunakan Scroll Bar.Banyak sekali fungsinya salah satunya adalah : karena akan mengurangi pemakaian space halaman,Loh koq bisa ??? sobat bisa dibayangkan apabila terdapat banyak postingan dalam 1 Tags ,pasti akan memakan banyak space di halmanan postigan tersebut. untuk menampilkan Artikel terkait tersebut.Memang bisa di siasati dengan mengurangi jumlah Artikel terkait yang akan tampil ttp rasanya kurang menarik buat penulis.

Disini akan di tampilkan 2 kode Artikel terkait yang menggunakan Scroll bar dan tanpa menggunakan Scroll bar.Seperti tampak gambar di atas adalah Artikel terkait dengan menggunakan Scroll Bar.

Oke kita langsung aja ke TKP.

Silahkan Anda Login dahulu ke Account Blogger.

Lanjutkan ke step-step dalam melakukan Editing Html (Jangan Lupa simpan template dahulu) jaga-jaga kalau ada kesalahan didalam melakukan pemasangan.meletakkan kode tersebut.

Apabila sudah silahkan sobat cari kode berikut : <data:post.body/> untuk memepercepat pencarian tekan Ctrl+F.Nanti akan ditemukan 2 kode yang sama itu dikarenakan satu kode untuk Read More.Silahkan sobat letakkan kode berikut di bawah ini tepat di bawah kode <data:post.body/> yang pertama .

Berikut ini Artikel terkait tanpa scroll box

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4>Artikel Terkait</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
------------------------------------------------------------------------

Artikel terkait dengan Scroll Bar !!!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>

<div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'>

<div class='widget-content'>
<h3>Artikel Terkait Lainnya Seputar:</h3>

<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
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;data2007&#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>

</div>

</div>
</b:if>




Langsung di Save -> dan lihat hasilnya  Semoga sukses  ???