Cara membuat Read More otomatis pada Blog dengan javascript

Salah satu cara untuk mempercantik halaman Blog anda adalah dengan meminimize tampilan postingan anda pada halaman depan / beranda. Bagaimana caranya? Gampang....

Untuk membuat Read More atau Baca Selengkapnya akan saya beri tahu caranya, namun sebelum masuk ke tutorial perlu anda ketahui ada dua pilihan untuk membuatnya yaitu dengan tulisan atau berupa tombol. Tapi nga usah kawatir, saya akan beri tahu keduanya :

1. Login ke Account Blogger anda
2. Masuk ke Design / Tata Letak lalu masuk ke EDIT HTML
3. Beri Centang pada Expend Template Widget ( Lihat Gambar1 )
4. Cari code </head> , Gunakan CTRL F untuk Mencari
5. Setelah ketemu tepat dibawahnya letakkan kode javascript berikut:
   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
6. Selanjutnya cari code <data:post.body/> atau <p><data:post.body/></p>
7. Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut diatas dan gantilah dengan kode berikut:
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
   <span class='rmlink' style='float:right;padding-top:20px;'>
   <a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
8. Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text, hapus kode <data:post.body/> atau <p><data:post.body/></p> tersebut dan gantilah dengan kode berikut:
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
   <span class='rmlink' style='float:right;padding-top:20px;'>
   <a expr:href='data:post.url'>[ Read More.. ]</a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
9. Dan yang terakhir jangan lupa Simpan Template / Save Template.

Gambar1

Sekian dulu ya, semoga artikel ini berguna buat Anda. jangan lupa kunjungi terus TUTORIAL & LIFESTYLE, dan dapatkan Update artikel terbaru kami.