Otomatis Readmore

Kamu pernahkan mendengar bahkan mungkin telah mengendarai sepeda motor otomatis, seperti mio, vario, atau spin. Jalannya tanpa memasukkan perseneling, langsung ngacir. Ternyata bukan hanya mesin yang bisa otomatis, readmore ada yang otomatis loh! Kalau tidak salah dulu pernah kita membicarakan tentang readmore dengan loading halaman, readmore tanpa loading halaman, dan readmore diikuti dengan judul posting. Sekarang ada trik blogger readmore baru yang otomatis, dimana trik ini OB dapat setelah jalan-jalan ke blog o-om.com tentang cara pasang auto readmore. Singkatnya cara kerja otomatis readmore ini sama seperti readmore dengan loading halaman, tetapi tanpa memasukkan kode dalam kalimat yang akan kamu penggal. Ya... iyalah, namanya saja otomatis. Dan kabarnya lagi, kamu dapat menentukan berapa jumlah karakter yang akan ditampilkan dalam postingan, baik dengan image maupun tanpa image.

Penting :
Sebelum beranjak lebih jauh, pastikan residu-residu readmore yang telah tertanam sebelumnya sudah dibersihkan. Atau diistilahkan dengan mengembalikan kode template seperti semula. Caranya dengan mereview ulang posting readmore yang pernah kamu pasang dalam blog kamu.

Berikut trik blogger membuat otomatis readmore dalam postingan :
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari Kode kode </head> dan Copy-Paste (copas) kode berikut di atasnya.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :
  1. Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur disebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".
  2. Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).
  3. Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).
  4. Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.
  5. Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.
  • Cari kembali kode seperti di bawah ini.
<data:post.body/>

atau
<p><data:post.body/></p>
  • Kalau sudah ketemu, ganti kode tersebut dengan kode berikut.
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Readmore »» <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Catatan :
  1. Ganti kode yang berwarna merah dengan letak readmore yang kamu inginkan left (kiri) atau right (kanan).
  2. Kalau perlu ganti Readmore dengan kata favorit kamu.
  3. Hapus kode <data:post.title/>, jika kamu tidak menginginkan readmore diikuti dengan judul posting.
  • Jangan lupa disimpan.

Selamat membuat otomatis readmore...

38 komentar untuk “Otomatis Readmore”

  1. pertamax....
    dicoba mas... ;)

    BalasHapus
  2. lupa lg mas,trnyta saya sdh psang...:D

    BalasHapus
  3. sip...
    segera saya coba...

    BalasHapus
  4. Mau dicoba dulu mas di BisAwanG Ajib nih mas Triknya

    BalasHapus
  5. Mas tnya. . cara ngilangin form konfirmasi di kolom komentar tu gmn ya mas. . tlng di bantu mas. .

    BalasHapus
  6. mas.. aku sudah coba trik ini dan berhasil1 aku ganti template malah nggak bisa lagi! ni lagi berjuag. mohon do'anya

    BalasHapus
  7. ALKAMDOLILLAH.. berhasil masSIP................................................

    BalasHapus
  8. oke mas..thanks ya...berguna bgt

    BalasHapus
  9. Waah, ini tutorial yang luar biasa. Tidak perlu susah-susah lagi bikin readmore per posting.
    Makasih banyak atas informasinya.

    BalasHapus
  10. Thanks Banget Boz
    Sangat2 membantu
    wt temen2 yang mo download film ke autonoricco.blogspot.com aja

    BalasHapus
  11. makasih bos inpoY, ne yg ane cari....

    BalasHapus
  12. bos, maksih... q dah coba n berhasilllllllllllll......kunjungi blog y bos...
    tapi tolong kasih saran bikin kotak komentar kayak milikY ne lho....

    BalasHapus
  13. MakaciH Bos...
    Bermanfaat banget nih..

    BalasHapus
  14. Thxz brow ats info nya.... 8-}

    BalasHapus
  15. halo aris, di templateku yg baru ga ada data:post.body/-nya. help me ...

    BalasHapus
  16. thanks !
    for your info............!http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

    BalasHapus
  17. Niiccee infooo gan.. udh gue cba n ternyata berhasiill.. hohoho

    thankkss gann.. :) :D :D

    BalasHapus
  18. Nah, kalau panduan read more yang ini aku agak ngerti. thanks ya bro, aku lagi seneng jalan-jalan di blog ini

    BalasHapus
  19. Makasih banyak nih tutornya

    BalasHapus
  20. gak perlu repot lagi buat penggalan artikel ya..

    BalasHapus
  21. trimakasih tipnya sangat membantu mapir dong ke www.reginz-fashion.blogpot.com

    BalasHapus
  22. Oke dech, lebih praktis. makasih atas sharingnya

    BalasHapus
  23. makasih atas panduan radmoornya...........nulisnya jd g repot................

    BalasHapus
  24. hmm rumit dikit yah om hehehehahaha

    BalasHapus
  25. wah keren bgt nee aku coppy ahhh

    BalasHapus
  26. hmm so cool like this hahaha

    BalasHapus
  27. kebetulan template bawaan ane udah auto readmore gan. makasih infonya

    BalasHapus
  28. You had some nice points here. I done a research on the topic and got most peoples will agree with you

    BalasHapus