Membuat Artikel Terkait Dengan Scroll Box

Untuk membuat scroll box yang dimaksud, kita perlu menyisipkan kode tertentu dalam kodescript widget artikel terkait tersebut. Kode yang dimaksud adalah
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> dan </div>.

-height:200px merupakan tinggi scroll box sebesar 200 piksel, Anda dapat menggantinya sesuai selera Anda. 

-overflow:auto jika banyaknya artikel terkait telah melebihi tinggi scroll box, maka akan terbentuk scroll atau penggulung secara otomatis. 

-border:1px solid #ccc merupakan atribut untuk kotak atau box yang terbentuk dengan tebal 1 piksel bergaya solid dan berwarna #ccc, silakan disesuaikan bila Anda menginginkannya

                                  

Ikuti langkah-langkah di bawah:

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Cari kode <data:post.body/>. Untuk mempercepat pencarian, silakan tekan Ctrl + F atau F3

5. Copy kode di bawah ini dan paste di bawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similar'>
<!-- ***http://galanf.blogspot.com*** -->
<!-- ***Related Articles by Labels - *** -->
<div class='widget-content related-by-cat'>
<h3>Related Posts / Artikel Terkait :</h3>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='data2011'/><br/><br/>
<div id='Klak Klik style='display:none;'>
</div>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;
maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;
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>

6.Simpan Template dan lihat hasilnya.

Nah selesai,gampangkan..?

Selamat Mencoba..!

Baca Juga Artikel Ini