Membuat Automatic Read More

Altenatif lain script css ini dimaksudkan  anda tidak perlu memenggal tulisan anda seperti sebelumnya. Hal yang sama pula telah saya posting sebelumnya

Ingin Membuatnya ? Seperti Biasa .

1. Login blogger
2. Rancangan(Layout)
3. Edit HTML
4. Downlaod Template Lengkap dahulu untuk mengamankan template Anda
5. Centang Expand Template Widget

Sebelum memulai Tutorial ini, Silahkan anda hapus dahulu Kode Read More anda yang sebelumnya jika anda pernah menggunakan Read More versi Biasa.

Cari Kode Dibawah ini : 

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

 

Kemudian Ganti Seluruh Kode Tersebut dengen kode Ini:

<p><data:post.body/></p>

Jika sudah, Cari kode </head> (Gunakan Ctrl+F untuk memudahkan anda).

Kemudian letakan script dibawah ini di atas kode </head>
 

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

Jika Sudah, cari Kode <p><data:post.body/></p> Dan ganti dengan Kode dibawah ini: 

<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'>READ MORE - <data:post.title/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 

Setelah itu, Silahkan Simpan Template Anda 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)