Kemarin telah Pasang Related Post secara sederhana dan caranya telah diposting disini , cara ini tanpa fungsi scroll , namun sekarang telah ganti lagi yaitu Pasang Related Post Dengan Fungsi Scroll, menurutku sih tampilannya agak menarik dan yang lebih penting lagi fungsi scroll down menu nya itu lho..siapa tahu blog ini bisa berumur panjang dan kategori postingannya bisa ratusan atau mungkin ribuan. Coba bayangkan kalau tidak pakai scroll.. wiiw panjang banget.. oleh karena itu (oki) saung web coba ganti lagi dengan cara yang ini, bagi yang ingin tahu, inilah cara Pasang Related Post Dengan Fungsi Scroll pada Template Blogspot.
Langsung saja , caranya seperti ini : ( bagi yang sudah pakai related post cara lain , sangat disarankan dihapus dulu, supaya hasilnya maksimal )
1. Masuk ke Dashboard , pilih Layout , pilih Edit HTML
2. Sangat disarankan untuk Download Full Template sebagai backup
3. Contreng .. eh centang Expand Widget Templates
4. Cari kode : <data:post.body/> , bagi yg sudah pakai Red more kode ini ada dua, nah ambil saja kode yang pertama
5. Copy kode dibawah ini dan pastekan dibawah kode no. 4 diatas
<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<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 = 10;
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>
6. Seterusnya cari lagi kode : ]]></b:skin> , kemudian copy kode dibawah ini dan simpan diatas nya.
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
7. Tulisan Related Post pada point 5. (warna biru) bisa diganti apa saja misalnya artikel yang berhubungan, artikel terkait dsb.
8. Selesai. Selamat mencoba untuk Pasang Related Post Dengan menggunaan Fungsi Scroll ini . Semoga sukses.
Ada yang masih ganjal di ati.. bila dilihat hasilnya di blog ini tampak jarak tulisanya itu 1,5 spasi. Saya maunya 1 spasi saja biar agak rapat gitu, tapi caranya belum ketemu tuh... bagi sobat2 yang tahu caranya ..kasih tahu ya.. please...
mantap sob aku ijin praktek aja deh
ReplyDeletebagus broo....praktekkan juga ahhh...thank's infonya kang
ReplyDeletemantap bro tutorialnya.
ReplyDeleteudah aku pasang di blogku..tampilan jadi lebih oke dan lebih menarik.
makasih..
cobain ah di blog sy...thnxs info nya ya kang :)
ReplyDeletewah boleh nich infonya nice info ya ,lam kenal bro :D
ReplyDeletemantap sob infonya..salutt dah :)
ReplyDeletewow langsung dicoba aja deh.. muantaap..
ReplyDeleteTRIMS.........
ReplyDeletethank u tip nya sob...langsung praktek....
ReplyDeleteKakak, terima kasih sebesar2nya,, sebelumnya hal ini saya ketik sendiri di postingnya, dan capek gila2an...waw berkat kakak nih
ReplyDeletesukses selalu dengan postingan2 okenya
@ semua sobat : duh tararengkiyu yah sobat2 dah mampir n comment
ReplyDeletekok saya data:post.body/nya ada 3 kang
ReplyDeletekasih tau donk kang kode sebelum data:post.body/nya biar jelas
balas commentnya di blog saya aja ya kang
http://uchihajaka.blogspot.com
ini baru artikel. . .
ReplyDeletethanks gan atas infonya. . .
good
http://asenk-ptc.co.nr
sudah tak pasang kang. hasilnya sukses
ReplyDeletenice info
ReplyDeleteIch schätze Sie! Lassen Sie mich sehen wie ein guter Artikel, und ich habe den Drang, einen Kommentar auf deinem Artikel habe ich etwas auf thomas sabo schmuck empfehlen machen
ReplyDeleteBisa menghemat tempat nih, tips yang bagus ni....
ReplyDeletewah, thanks ! akhirnya berhasil
ReplyDeletemantap ,sudah dipasang.
ReplyDeletemakasih infonya :)
thanks atas infonya mas,
ReplyDeletesalam kenal mas
ReplyDeleteternyata mudah ya buat related postnya
ReplyDeleteThanks Totornya yah gan..!!!
ReplyDeleteassalam..salam kenal
ReplyDeletethanks infonya gan.sudah ane terapin.mantap
gagal terus ya gan, ??
ReplyDeletepdhal template no error ? knp ga muncul ya..
mantapp gan, udah muncul... :)
ReplyDeletethanks.....
dicoba gan :))
ReplyDeletemakasih Bang, ijin terapkan di Blg Saiya. salam kenal
ReplyDeleteagan agan,andi butuh banget bantuan agan2 diatas,tulisa kode yang tidak ada di template platinum andi,ada yang punya solusinya gak ya,ini blog andi,http://andi-rhejank.blogspot.com/
ReplyDeleteterima kasih semuanya,mohon jawabannya
klu untuk ganti backroundnya giamana brow??
ReplyDeletetrus pas di sorotkan kursor langsung ganti warna lagi. untuk ganti warna yang pas disorotkan itu diganti dimananya brow??
thanks before??
Langsung dicoba di blog ku..
ReplyDeleteartikelnya menambah wawasan.. terima kasih udh share ya
ReplyDelete