Cara Membuat Artikel Terkait scroll box blogspot
Cara Membuat Artikel Terkait scroll box blogspot | Berikut Cara Membuat Artikel Terkait scroll box pada blogger / blogspot. Artikel terkait atau relate post scroll box ini sangat cocok untuk blog yang memiliki banyak postingan pada setiap labelnya. Selain itu manfaatnya juga untuk membuat blog kita terlihat menjadi lebih rapi.
Untuk cara membuatnya tidak terlalu sulit, terutama untuk para blogger yang sudah ahli dan terbiasa mengedit HTML blognya. Berikut langkahnya ;
Silahkan ganti kode yang berwarna biru diatas pada ;
Untuk cara membuatnya tidak terlalu sulit, terutama untuk para blogger yang sudah ahli dan terbiasa mengedit HTML blognya. Berikut langkahnya ;
- Masuk / login ke akun blogger Anda
- Klik Rancangan > Edit HTML
- Centang pada Expand Widget Template
- Klik Download Template Lengkap ( hal ini untuk mengantisipasi jika terjadi eror)
- Selanjutnya silahkan cari kode <data:post.body/> ( untuk mempermudah pencarian gunakan Control+F pada keyboard, lalu masukkan kode tersebut)
- Letakkan kode berikut tepat dibawah <data:post.body/> yang ke-1 ( Catatan : jika pada blog Anda sudah terdapat fasilitas read more / baca selengkapnya, maka letakkan kode berikut tepat di bawah kode <data:post.body/> ke-2)
Silahkan Anda copy kode berikut ini dan pastekan pada kode yang tersebut diatas ;
<b:if cond='data:blog.pageType == "item"'>
<div class='similar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<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='data2007'/><br/><br/>
<div id='hoctro' style='display:none;'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;
maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script></div></div>
</div></b:if>
- Terakhir klik Simpan.
- Hasilnya akan tampak seperti gambar di bawah ;
Silahkan ganti kode yang berwarna biru diatas pada ;
height:200px (tinggi scroll box)
overflow:auto (scroll atau penggulung yang muncul jika jumlah artikel mencapai batas max box)
border:1px solid #ccc (tebal dan warna atribut pada kotak)
Tidak kode biru tersebut juga tidak masalah, jika memang sudah sesuai selera. Yang terpenting back up dulu template anda dengan mengklik download template lengkap.
