Cara membuat auto readmore [Baca Selengkapnya..] di blogspot

Postingan saya kali ini adalah membuat auto [Baca Selanjutnya..] di blogspot. Saya membagi pengalaman tentang cara membuat auto [Baca Selanjutnya..] setelah beberapa kali mencoba tutorial dari beberapa postingan kwan2 blogger ternyata pertama gagal dan yang kedua berhasil  tetapi hasilnya kurang memuaskan dan yang ketiga saya merasa puas. Di bawah ini tampilan dari blog saya yang sudah memakai auto [Baca Selanjutnya..]

Langsung ke TKP aja gan...
Login ke blog >> pilih template >> pilih Edit HTML
Cari kode </head> dan letakkan kode dibawah ini diatas </head>

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

Keterangan : summary noimg = 250 merupakan jumlah ringkasan tulisan yang tidak ada gambarnya.
         summary img = 250 merupakan jumlah ringkasan tulisan yang ada gambarnya.
         img thumb height = 120 merupakan tinggi gambar.
         img thumb widhth = 120 merupakan lebar gambarnya.

selanjutnya cari kode dan letakkan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div expr:id='"summary" + data:post.id' style='text-align:justify;'><data:post.body/> </div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span style='float:right'><a expr:href='data:post.url'>[Baca Selengkapnya...] </a> </span> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> </b:if>

Jika sudah sebaiknya dilihat dulu dengan mengklik pratinjau/preview, kalau sudah benar tidak ada masalah maka hasilnya akan sesuai yang diharapkan.
Selanjutnya klik Simpan Template.

Demikianlah tutorial dan pengalaman yang dapat saya bagikan.
Selamat mencoba kawan...