Cara Membuat Auto Read More Di Blog

Cara Membuat Auto Read More Di Blog

Sobat blog kali ini saya akan membagikan cara membuat Auto Read More di blog, mungkin bagi sobat yang masi baru dalam dunia blog belum mengerti apa si maksud membuat "Auto Read More Di Blog" nah saya akan menerangkan sedikit, Auto read more adalah sebuah sistem dalam blog untuk memenggal postingan yang tampil di halaman sehingga postingan yang akan di tampilkan akan jauh lebih ringkas, berbeda dengan blog yang tidak memakai read more dalam satu halaman bisa saja hanya menampilkan satu postingan saja dikarnakan terlalu panjangnya postingan tersebut. Nah kan sudah tau apa itu Auto read more sekarang bagi yang berminat saya akan membagikan caranya kepada anda

pertama yang harus dilakukan adalah kunjungi Blogger.com

• log in di blogger.com
• lalu pilih template ----> Edit HTML
• sebelum melakukan editing saya sarankan untuk meng copy dulu script blog anda lalu save di notepad agar jika terjadi kesalahan tinggal anda copy paste script yang sudah di save di notepad tadi
• ok jika sudah melakukan langkah pada point 3 langsung kita edit script nya
• cari kode berikut </head> untuk mempermudah silahkan tekan F3 atau CTRL+F
• tepat di atas nya copy kan kode berikut ini
<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 220; img_thumb_height = 120; img_thumb_width = 220; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div> "+removeHtmlTag(f.innerHTML,e)+"</div> ";f.innerHTML=c}; //]]> </script>

• selanjutnya cari kode  <data:post.body/> lalu gantikan code tersebut dengan code berikut ini
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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'><b>Read more</b> → <a expr:href='data:post.url'><data:post.title/></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>

• penting untuk di ingat code   <data:post.body/> bukan hanya satu anda harus mencarinya lagi dan menggantinya seperti langkah di point 7 tadi, biasanya ada 3 code seperti itu yang harus anda ganti
• jika sudah klik pratinjau template / view untuk melihat apakah code tersebut berjalan dengan baik 
• jika sudah berjalan silahkan klick simpan template / save

selamat mencoba sendiri semoga sukses