Lihat setelah post ini, kan ada related post dengan fungsi scroll juga ...^^
Yuk, langsung ke tutorial cara pembuatnnya saja,
* Masuk ke blogger
* Buka design/Rancangan
* Pilih Edit HTML
* Centang pada "Expang Widget Template"
* Lalu cari kode
<p><data:post.body/></p>
(gunakan Ctrl + F)* Setelah ketemu, masukkan kode berikut di bawah kode
<p><data:post.body/></p>
tadi
<b:if cond='data:blog.pageType == "item"'>
<H2>Related Post:</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 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
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>
* Tulisan Related Post: bisa Sobat ganti dengan tulisan Sobat sendiri, misal "post terkait", "post yang sama" dan sebagainya. height:200px adalah tinggi kotaknya, Sobat bisa Ganti kode 200px
* Lalu cari kode ]]>
* Dan letakkan kode berikut di atasnya
/*-- Related Post dengan Scroll Ka Damar--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
* Note :
o background-color: #E0F8E0; kode #E0F8E0 adalah kode warna bacgkround kotak related post. Sobat bisa ganti kodenya ( Baca : Stock kode Warna )
o .rbbox:hover{background-color: #EFFBEF;} kode #EFFBEFadalah kode warna bacgkround kotak related post pada saat disorot dengan mouse (hover). Sobat bisa ganti kodenya.
Jika ada artikel yang bermasalah laporkan kepada kami lewat komentar dibawah ini.
Blog Ini DOFOLLOW silahkan berikan komentar sesuai artikel. komentar yang ngaco / spam akan di hapus.
Terima Kasih.