Belajar membuat fungsi read more secara auto dan canggih

Fungsi Read More baru ini memang agak berbeza dengan versi Read More yang lain.Versi lama kita harus meng-cut tulisan menggunakan cara manual . kode ini biasanya kita letakkan secara manual kedalam halaman posting. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, kerana fungsinya bekerja secara automatik tanpa perlu menambahkan kode diatas.

Satu lagi keistimewaannya ialah selepas ayat READ MORE ada disertakan tajuk entri juga

Seterusnya..kehebatannya, fungsi Read More ini mampu menampilkan image pertama dalam entri dan mem-fload image yang kita letakkan di awal paragraf, meskipun gambar yang kita letakan berada di tengah atau akhir posting. Mungkin lebih senang saya sebut saja dengan fungsi image thumbnail.

Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikut sertakan dalam posting dan yang kedua jumlah karakter tanpa image. Masih keliru maksudnya? kita ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kembalikan dulu ke seperti asal, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeza,tinggal disesuaikan saja)

<div class='post-header-line-1'/><div class='post-body'> 

<b:if cond='data:blog.pageType == "item"'><br /> <style>.fullpost{display:inline;}</style><br /> <p><data:post.body/></p><b:else/> 
<br /> <style>.fullpost{display:none;}</style><br /> <p><data:post.body/></p><a expr:href='data:post.url'>Readmore</a><br /> </b:if><br /> <div style='clear: both;'/>

OK, kalau sudah teruskan dengan tutorial dibawah.
jika tiada kode diatas teruskan saja dibawah

Pertama, sila terus ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> tadi Kalau sudah, jangan lupa di simpan terlebih dahulu.



seterusnya copy paste saja kode dibawah ini:




<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </script><br /> <br /> <br /> <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>

Masih di halaman EDIT HTML, tandakan pada "Expand widget template" lalu carikan kode seperti dibawah
(gunakan find untuk memudahkan kerja anda)

< data:post.body/ >



jika sudah, ganti kode < data:post.body/ > dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'><br /> <div expr:id='"summary" + data:post.id'><data:post.body/></div><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>

(cuba pratontonkan dahulu. jika tiada error, silakan disimpan dan lihat hasilnya)


Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak sila 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)

(Selamat mencoba..)