Tuesday, July 13, 2010

CARA MEMBUAT RELATED POST... DENGAN ATAU TANPA SCROLLING... DAN TANPA THUMBNAIL....

... Menambah tutorial lagi.. 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??? ".... baiklah akan dibahas sekalian di postingan kali ini...

...Artikel Terkait (Related Post) adalah suatu daftar beberapa judul artikel yang masih ada hubungannya dengan judul artikel yang sedang dibaca pada saat itu.. dan biasanya terletak langsung dibawah artikel tersebut....

...Script Artikel Terkait yang saya gunakan mungkin berbeda dengan yang sobat blogger lain gunakan... karena memang sebenarnya ada beberapa kode script yang berbeda untuk menampilkan Artikel Terkait (Related Post)... tetapi untuk menambahkan scrolling pada artikel terkait dengan daftar yang panjang menggunakan trik script scrolling yang sama saja... masih binggung ??! ....

...Tanpa panjang lebar lagi... Pahami langkah-langkahnya berikut ini :
1. Seperti biasa Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang expand template widget )...
2. Backup dahulu template widget-nya ke notepad ( untuk antisipasi )...
3. Tekan Control+F lalu Copas kode ini " </head> " tinggal dicari dengan klik Next / Previous ( jika memakai Mozilla Firefox )...
4. Jika sudah ketemu lalu Copy kode dibawah ini diatas " </head> " ...
<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 -kan 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 lagi 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>


PERHATIKAN :
> Hitam ;
- Tutorial blogging lainnya... = Gantilah judulnya sesuai dengan keinginanmu...
- "max-results=5" = Ubah nilainya, untuk menentukan banyak artikel terkait yang akan ditampilkan..

> Biru = script ini untuk membuat border kolom pada artikel terkait.. bisa kamu ubah-ubah warnanya di backround-color.. kalau saya menggunakan warna hijau muda... bisa juga kamu atur border, moz-border-radius, dsb... atau bisa juga kamu HAPUS script border kolom ini jika tidak mau memakainya...

> Hijau = Script ini untuk fungsi SCROLLING... bisa kamu atur sesuai keinginan kamu Height, Widht, Border, serta text-align-nya... atau bisa juga kamu HAPUS script scrolling ini jika kamu tidak suka memakai scrolling...

Ket : baik kode script border kolom & kode script Scrolling ini bisa juga diterapkan di kode script related post lainnya.. maksudnya yang mungkin agak berbeda dengan kode script related post yang saya gunakan seperti diatas...

8. Jika sudah selesai.. Simpan Template & Resfresh blognya...


.... Di pahami benar2 dulu ya...

72 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. Tawon Republik > silahkan kapan2 dicoba gan.. :D

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

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

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

    ReplyDelete
  46. saya tak dapat menerapkan tutorial ini

    ReplyDelete
  47. nda bisa bisa malah wellformed

    ReplyDelete
  48. @sigit

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

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

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

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

    Cuman ada Kotaknya aja?
    Mohon Penjelasannya..

    ReplyDelete
  52. @Ibnu_Fattah:

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

    ReplyDelete
  53. Sudah Jadi Gan related posnya tank tutorial nya

    ReplyDelete
  54. mkasih mas,

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

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

    ReplyDelete
  56. 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.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.