Cara Membuat Artikel Terkait Dengan Fungsi Scroll.Mungkin cara ini sudah diketahui oleh banyak semua orang,terutama para Blogger Mania.Baik itu yang sudah master ataupun masih Newbie seperti saya ini.Saya hanya ingin mengulas sedikit kembali tentang Cara Membuat Artikel Terkait Dengan Fungsi Scroll ini dengan berdasarkan pengalaman saya yang pernah dilakukan untuk blog ini.Baiklah daripada kita berlama-lama,lebih baik kita langsung saja.Chek It Dot !!
Langkahnya :
- Masuk ke akun Blog anda
- Pilih Menu Template dan kemudian klik Edit HTML
- Kemudian cari kode ini ]]></b:skin> dengan menggunakan ctrl+F
- Masukkan kode css di bawah ini dan letakkan diatas kode ]]></b:skin>.
.rbbox {border: 1px solid #333; padding: 5px; background-color: #F2F2F2;-moz-border-radius:0px; margin:5px;}
.rbbox:hover {background-color: #F2F2F2;}
.rbbox ul li {display : block; background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0; margin-left : -10px; padding-top : 0; padding-right : 0px; padding-bottom : 1px; padding-left : 10px; margin-bottom : 5px; line-height : 1em; border-bottom:1px dotted #cccccc;}
.rbbox:hover {background-color: #F2F2F2;}
.rbbox ul li {display : block; background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0; margin-left : -10px; padding-top : 0; padding-right : 0px; padding-bottom : 1px; padding-left : 10px; margin-bottom : 5px; line-height : 1em; border-bottom:1px dotted #cccccc;}
- Lalu copy kode script dibawah ini, kemudian letakan dibawah kode "<data:post.body/>". Dan jika anda menemukan kode "<data:post.body/>" lebih dari satu, letakan kode script dibawah ini dibawah kode "<data:post.body/>" yang ke 2 atau 3!
<b:if cond='data:blog.pageType == "item"'>
<b>Artikel Terkait :</b>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 4;
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('albri').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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>