7/31/09

Pasang Related Post Dengan Fungsi Scroll


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 == &quot;item&quot;'>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
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;albri&#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>
<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...


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Pasang Related Post Dengan Fungsi Scroll, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

32 comments:

  1. mantap sob aku ijin praktek aja deh

    ReplyDelete
  2. bagus broo....praktekkan juga ahhh...thank's infonya kang

    ReplyDelete
  3. mantap bro tutorialnya.
    udah aku pasang di blogku..tampilan jadi lebih oke dan lebih menarik.
    makasih..

    ReplyDelete
  4. cobain ah di blog sy...thnxs info nya ya kang :)

    ReplyDelete
  5. wah boleh nich infonya nice info ya ,lam kenal bro :D

    ReplyDelete
  6. wow langsung dicoba aja deh.. muantaap..

    ReplyDelete
  7. thank u tip nya sob...langsung praktek....

    ReplyDelete
  8. Kakak, terima kasih sebesar2nya,, sebelumnya hal ini saya ketik sendiri di postingnya, dan capek gila2an...waw berkat kakak nih

    sukses selalu dengan postingan2 okenya

    ReplyDelete
  9. @ semua sobat : duh tararengkiyu yah sobat2 dah mampir n comment

    ReplyDelete
  10. kok saya data:post.body/nya ada 3 kang
    kasih tau donk kang kode sebelum data:post.body/nya biar jelas
    balas commentnya di blog saya aja ya kang
    http://uchihajaka.blogspot.com

    ReplyDelete
  11. ini baru artikel. . .
    thanks gan atas infonya. . .
    good

    http://asenk-ptc.co.nr

    ReplyDelete
  12. Ich 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

    ReplyDelete
  13. Bisa menghemat tempat nih, tips yang bagus ni....

    ReplyDelete
  14. mantap ,sudah dipasang.
    makasih infonya :)

    ReplyDelete
  15. assalam..salam kenal
    thanks infonya gan.sudah ane terapin.mantap

    ReplyDelete
  16. gagal terus ya gan, ??
    pdhal template no error ? knp ga muncul ya..

    ReplyDelete
  17. mantapp gan, udah muncul... :)
    thanks.....

    ReplyDelete
  18. makasih Bang, ijin terapkan di Blg Saiya. salam kenal

    ReplyDelete
  19. agan 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/

    terima kasih semuanya,mohon jawabannya

    ReplyDelete
  20. klu untuk ganti backroundnya giamana brow??
    trus pas di sorotkan kursor langsung ganti warna lagi. untuk ganti warna yang pas disorotkan itu diganti dimananya brow??
    thanks before??

    ReplyDelete
  21. artikelnya menambah wawasan.. terima kasih udh share ya

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger