buat sobat blogger yang ingin membuat read more yang otomatis tidak secara manual yang harus men setting sebelum memposting tulisan mu gunakan saja trik yang satu ini mudah-mudahan bisa membatu sobat blogger semua ok kita lanjutin ja yoo... triknya :)

ada satu kehebatan lagi dalam trik read more ini, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.



Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! buat sobat blogger Yang pernah memasang Read More versi lama atau read more yang manual sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<br /><b:if cond='data:blog.pageType == "item"'> <br /><style>.fullpost{display:inline;}</style> <br /><p><data:post.body/></p> <br /><b:else/> <br />

dan code di bawa ini

<br /><a expr:href='data:post.url'>Readmore</a> <br /></b:if> <br />


OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.



Pertama, silahkan masuk aja langsung ke halaman EDIT HTML, Cari kode '""' kemudian letakan script dibawah ini di atas kode '""' Kalo sudah, jangan lupa di simpan terlebih dahulu.



Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'> <br />var thumbnail_mode = "float" ; <br />summary_noimg = 250; <br />summary_img = 250; <br />img_thumb_height = 120; <br />img_thumb_width = 120; <br /></script> <br /> <br /> <br /><script type='text/javascript'> <br />//<![CDATA[ <br />/****************************************** <br />Auto-readmore link script, version 2.0 (for blogspot) <br /> <br />(C)2008 by Anhvo <br /> <br />visit http://en.vietwebguide.com to get more cool hacks <br />********************************************/ <br />function removeHtmlTag(strx,chop){ <br />if(strx.indexOf("<")!=-1) <br />{ <br />var s = strx.split("<"); <br />for(var i=0;i<s.length;i++){ <br />if(s[i].indexOf(">")!=-1){ <br />s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); <br />} <br />} <br />strx = s.join(""); <br />} <br />chop = (chop < strx.length-1) ? chop : strx.length-2; <br />while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; <br />strx = strx.substring(0,chop-1); <br />return strx+'...'; <br />} <br /> <br />function createSummaryAndThumb(pID){ <br />var div = document.getElementById(pID); <br />var imgtag = ""; <br />var img = div.getElementsByTagName("img"); <br />var summ = summary_noimg; <br />if(img.length>=1) { <br />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>'; <br />summ = summary_img; <br />} <br /> <br />var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; <br />div.innerHTML = summary; <br />} <br />//]]> <br /></script>



Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>


Kalo sudah, ganti kode dengan semua kode dibawah ini


<br /><b:if cond='data:blog.pageType != "item"'> <br /><div expr:id='"summary" + data:post.id'><data:post.body/></div> <br /><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <br /><span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span> <br /></b:if> <br /><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>



silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
tulisan "READ MORE" bisa di ganti dengan teks lain terserah sobat blogger contoh : " Baca selanjutnya" / "Selengkapnya" / "Tulisan selengkapnya" tergantung blogger yang mau menuliskan pa pada keterangan read more nya ok....

Selamat mencoba.....

jangan lupa berikan komentarnya ok sobat.....