Tuesday, July 13, 2010

Gadget Related Post Dengan Fitur Scrolling Dan Tanpa Thumbnail

Berhubung ada sahabat blogger iplock yang bertanya "oia kang,ane pngn di scroll dong yang artikel terkaitnya.
jadi ga panjang yang diblog ane ntu,ntuh digimanain ya??? ".

Related Post adalah widget daftar artikel yang masih terkait dengan artikel yang sedang dibaca pada saat itu dan biasanya terletak langsung dibawah artikel tersebut.


Langkah-langkahnya sbb :

1. Login ke blogger > rancangan > edit html > edit template, centang expand template widget.

2. Backup dahulu template ke notepad.

3. Ctrl F lalu cari kode ini "</head>".

4. Copy kode dibawah ini diatas kode "</head>" tsb.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

5. Paste seperti contoh dibawah ini.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

</head>

6. Kemudian cari kode ini "<data:post.body/>" seperti langkah ke-3 diatas lalu copy lagi kode dibawah ini sesudahnya.
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>



7. Paste seperti contoh dibawah ini.
<data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>


Hitam. 
Tutorial blogging lainnya : Gantilah judulnya sesuai keinginan.
"max-results=5" : Nilai ini untuk menentukan banyak artikel terkait yang akan ditampilkan.

Biru.
Ini untuk membuat border kolom pada artikel terkait.

Hijau.
Ini untuk fitur Scrolling.


8. Simpan template & reload blognya.



Selamat Mencoba.



70 comments:

  1. aku dah foolow balik mas juragan..hehehe..makasih lho ya......jgn sungkan2 kalo visiting dan baca2...hohoho..skali lg makasih...

    ReplyDelete
  2. Belantara Indonesia > Oke gan.. Siip ;)

    ReplyDelete
  3. wah makasih loh mas dah ditulisin tutornya!!!
    btw buat yang tips yang no 6, ane dah buat,apa tetep harus ngikutin dari pertama atau gimn nih mas!!!!

    mhn bimbingannya!!

    ReplyDelete
  4. Mantap brow tutorialnya....
    sukses selalu ya...
    salamkenal dan salam hangat dari blogger Bali

    ReplyDelete
  5. oke deh sobat, langsung aku save :)

    ReplyDelete
  6. iplock > masalah penambahan fungsi Scrolling pada daftar artikel terkait...

    ...yg perlu kamu lakukan hanya menambahkan "script scrolling" saja pada script artikel terkaitmu.. kan udah ada contohnya di > http://ecaknyo.blogspot.com/2010/07/cara-membuat-related-post-dengan-atau.html .... jadi tdk usah ikuti langkah dri pertama.. perhatikan sj langkah no.7 (yg saya warnai hijau)...

    jadi hanya tambahkan script scrolling seperti dibawah ini ;

    <div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 150px; text-align: left; '>

    DAN

    </div>

    Contohnya penempatannya seperti ini ;

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <h4><i>Tutorial blogging lainnya...</i></h4>

    <div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 150px; text-align: left; '> */ INI AWAL SCRIPT SCROLLING */

    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

    </div> */ INI PENUTUP SCRIPT SCROLLING */

    </b:if>

    ... kira2 begitu sobatku.. walopun mungkin sedikit berbeda script artikel terkait kita.. tpi cara penempatan script scrollingnya sama saja
    .. :)

    ReplyDelete
  7. Pebisnis > oke.. mari BW gan.. :D

    Bali Wedding Photography > Thx gan.. salam dari blogger palembang.. ;)

    four dreams > silahkan saja sobat... :)

    ReplyDelete
  8. ;)
    mantep mas,
    langsung dipraktekkan nih,
    keren..

    follw aah..
    hehe

    ReplyDelete
  9. oh giu ya sob,ok dah, tak coba dulu!!!
    makasih nih buat tutornya!!!

    ReplyDelete
  10. Yudie Blog's > thx.. wa FOLLOW BALIK gan.. ;)

    iplock > silahkan dicoba.. dan smoga berhasil.. jgn lupa di save dulu widget template-nya di Notepad (buat jaga2 aj kalo trjadi error).. :)

    ReplyDelete
  11. waaaaah, mantabs and kerend's, langsung ke TKP tuk di coba, makasih infonya....

    ReplyDelete
  12. wah aku dah pasang nih.,.,tetep mantep dah infonya ,,salam kenal ya,,,

    ReplyDelete
  13. Komplit Mas, klo versi thumnaillbih mudah pke linkwithin...

    ReplyDelete
  14. PIK Remaja Al-Hikmah > silahkan dipelajari dulu gan.. :)

    o'o > salam kenal jg... silahkan mencoba :D

    Ka Damar > betul ..gw dulu udah pake yg likwithin.. bikin berat gan.. ini post-nya > http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html :))

    ReplyDelete
  15. Related Post ini selain untuk membuat pengunjung tertarik membaca artikel lainnya dengan mudah, SEO Friendly lagi..
    nach, bagi yang sering adu nyali di Kontes SEO.. widget satu ini wajib hukumnya..
    Macam-macam Related Post
    Happy blogging..

    ReplyDelete
  16. Kalau membaca artikel sekaligus menyimak komentar2nya ternyata pada ahli html ya blogger sekarang. Saya ketinggalan nih

    Salam ukhuwah

    ReplyDelete
  17. rasiqzone > betul gan... ada keuntungannya menggunakan related post.. :D

    BeDa > semua sobat blogger itu pintar2 gan.. :) ..buktinya pada bisa smua bikin blog yg bagus2.. salut gw.. cuma ad yang duluan saj blogging-nya makanya ilmu dpt duluan.. ;)

    ReplyDelete
  18. tips yang bagus..
    membuat blog lebih cantik lagi..

    ReplyDelete
  19. wahh kebetulan ditempatku belum dipasang ini broo,,
    boleh di coba tuhhh

    ReplyDelete
  20. nice nih.. gokil abizzz.. aku sebelumnya dah pernah coba..... mantabh

    ReplyDelete
  21. sipppp, ane udah bisa sob ^_^ berhasil !

    ReplyDelete
  22. PeJhes > betul gan .. :D

    denadnan > thx gan.. ;)

    Tebar Ilmu > silahkan dicoba gan.. :)

    Gieterror > silahkan dicoba .. :D

    aji > siip.. emg mantap gan.. ;)

    MF Modifier > baguslah kalo udah pernah coba gan.. :))

    ReplyDelete
  23. Thanks sob ane mau eksperimen, Artikelnya mudah dimengerti" ;)

    ReplyDelete
  24. makasih mas atas kunjungannya..maaf ya mas aku lum bisa balas follownya..alnya pake internet gratis nih...bentar malam pasti saya follow balik kok..

    ReplyDelete
  25. Dengan kode javascript sekompleks itu, kira2 seberapa pengaruh ke Loading time homepage Blog kita gan?

    Apakah script tersebut bisa di compress lagi biar lebih ringan dalam loading nya?? mohon pencerahannya... newbie nih..

    ReplyDelete
  26. keren boz.tapi itu relatednya sesuai label atau apa?

    ReplyDelete
  27. Fadel i-om > baguslah kalo mudah dimengerti gan..

    Investasi Online terbaru dan tercepat > sukses slalu jg utkmu sobat :))

    Investasi Online terbaru dan tercepat > oke.. asal jgn lupa aj FOLLOw baliknya.. =))

    aLamathuR d'hileudjapanist II > emg sdkit berpengaruh..tp bukan di homepage..pengaruhnya pas diklik di postingan sj..kan artikel terkaitnya muncul di bawah postingan.. coba aj testing blogku ini gan.. :)

    Bisa di Compress tpi hati2 ya.. pilih cara kompres yg simple aj.. jgn yg cara advanced ntar bisa2 dikompres habis javascript-nya akhirnya jd gk berfungsi...

    SIGIT SUPER > yups.. sesuai label gan.. :)

    ReplyDelete
  28. mantab infonya sobb, sementara saya belum pakai dulu soale artikelnya masih minim..

    ReplyDelete
  29. KlipangDotCom > oke gan.. keep posting ya.. ;)

    ReplyDelete
  30. aslm wr wb

    slm knl dr blogger palembang

    kalo istriny suka beliin baju diblogku y mksih

    bajuqueen.blogspot.com

    ReplyDelete
  31. Raini Munti > wa'alaikum slm... salam blogger indonesia gan... wkwkwkwk.. :D iya nih ..istriku seneng baju2 islami yg modern :)

    ReplyDelete
  32. aslm wr wb

    alhmdulillah istriny senang, kalo bgitu dtunggu pesanannya murah2 dn unik, pas bwt momen lebaran :)

    bajuqueen.blogspot.com

    ReplyDelete
  33. tutorial blogger yang blogspot ya, kalau saya pakai plugin karena wp

    ReplyDelete
  34. Banyak juga ya kodenya yg harus dipasang.

    ReplyDelete
  35. wah makasi infonya..
    iya kadang related post menuh2in halaman

    ReplyDelete
  36. Raini Munti > :D ..wakakkak.. bisa aj nih

    artikel psikologi > gw dulu jg pemakai wp gan.. ;)

    Tongkonan > gk jg tuh gan.. kan tingal copas ja.. :))

    Rumah Imajinasi > thx ya.. ntar gw ambil :)

    readhermind-dy > posting inilah solusinya sob ;)

    ReplyDelete
  37. blognya fariativ banget yaaa.... rajin jalan2 blog kayaknya km, yaaa... :) makasih, udah mampir di blogku kemaren...

    ReplyDelete
  38. salam sobat
    wah harus edit template ya mas,,duh saya masih bingung kalau cari kodenya, karena beda kode-kode templatenya.
    kunjungan dari Saudi Arabia.

    ReplyDelete
  39. Fahma Nurika > maksih kunjungannya.. ntar gw mampir balik ;)

    Nita > ntar gw mampir lagi :D

    NURA > wow... jauh amit gan.. kerja ya di saudi arabia :D

    ReplyDelete
  40. waw mantap nih
    kunjungi sixandal.blogspot.com ya

    ReplyDelete
  41. dupopadana raigghi kaskus > oke.. wa mampir gan.. :)

    ReplyDelete
  42. Bisa dicoba nih. Thx ya infonya

    ReplyDelete
  43. Tawon Republik > silahkan kapan2 dicoba gan.. :D

    ReplyDelete
  44. Muhammad Chandra > salam kenal jg chandra.. oke visiting u now.. :)

    ReplyDelete
  45. rasanya q gk bklan bosen deh dtang kesini.. blog sederhana yang berada di tangan professional. :D

    ReplyDelete
  46. Naruto Soundtrack > thx gan... jd malu gw hahahaha :))

    ReplyDelete
  47. saya tak dapat menerapkan tutorial ini

    ReplyDelete
  48. nda bisa bisa malah wellformed

    ReplyDelete
  49. @sigit

    Harus hati2 gan... dan teliti..tutor yang satu ini memang membingungkan..tapi kalo sdh dipahami pasti bisa kok.. ;)

    ReplyDelete
  50. thank you sob....
    kunjungi balik yah,,,

    ReplyDelete
  51. Dah saya coba & berhasil. Makasih ya buat infonya. Keep posting!

    ReplyDelete
  52. :-/
    Mas koq punya saya gag ada isi nya??

    Cuman ada Kotaknya aja?
    Mohon Penjelasannya..

    ReplyDelete
  53. @Ibnu_Fattah:

    gk ada isinya... ?? gk slah nempatin scriptnya kan gan..

    ReplyDelete
  54. Sudah Jadi Gan related posnya tank tutorial nya

    ReplyDelete
  55. mkasih mas,

    maaf OOT nih, mo tanya...
    knp tiap linknya di short dgn adf.ly, apa itu trmsuk iklan..
    mklum nyubie ! =))

    ReplyDelete
  56. nice post Mass bro, btw lg blogwalking tengah malam dari Sulawesi..

    ReplyDelete
  57. Saya sudah mencoba langkah 1-5. Tapi mulai langkah ke 6 nggak bisa. Sudah dicari kalimatnya, tapi di blog saya tidak ada.
    Adakah solusi yang lain?

    Terimakasih.

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.