Membuat Readmore Otomatis Terbaru

Assalamu’alaikum w.w.

Kali ini saya mau berbagi ilmu tentang membuat readmore otomatis yang baru saja saya dapat, padahal ilmu ini adanya sudah agak lama sih. :( Tapi, ga apa-apa deh, mending terlambat, dari pada ga sama sekali, iya ga sih? Dari pada kelamaan basa basinya, yuk langsung saja ke pembahasan.
Tapi, jangan ada satu langkah pun yang terlewatkan ya coz saya pernah lupa ga centang Expand Widget, tahu-tahu kode <data:post.body/> ga ketemu deh. :D

Untuk membuat readmore otomatis berikut langkah-langkahnya :

1. Log in ke account blogger sobat.
2. Setelah masuk ke Dashbor, klik Design > Edit HTML. Beri tanda centang pada Exand Widget Template.
3. Cari kode </head>. Agar lebih mudah, tekan Ctrl+F. Pastekan kode berikut tepat di bawah kode </head>
   <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script><br /> <script type='text/javascript'> //<![CDATA[ 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><br />
4. Kemudian cari kode <data:post.body/>. Kalau sudah ketemu, ganti kode tersebut dengan kode di bawah 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:right;padding-top:20px;'><br /> <a expr:href='data:post.url'> <b> readmore</b> »»   </a></span><br /> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><data:post.body/><br /> </b:if><br />
5. Klik preview untuk melihat hasilnya sebelum sobat menyimpannya. Kalau sudah merasa cocok, klik Save Template.

Keterangan kode :

var thumbnail_mode = "float"; : Letak thumbnail berada di “float” kiri. Jika tidak suka float kiri, sobat bisa menggantinya dengan “no-float”;

summary_noimg = 250; : Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;

summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;

img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;

img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;

Gampang kan? Hasilnya nanti seperti ini :

Selamat mencoba dan semoga berhasil ya. :)

Wassalamu’alaikum w.w.

Sumber : http://www.berryhs.com/2012/03/cara-mudah-membuat-readmore-otomatis-di.html