Cara Membuat ReadMore Otomatis di Blogger

Postingan kali ini akan membahas bagaimana caranya membuat 'ReadMore' secara otomatis, dengan begitu akan menghemat waktu dan tenaga untuk tidak usah lagi mengeditnya secara manual.

Dengan kombinasi javascript 'read more' yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali. sama seperti blog saya ini, Lalu bagaimana jika saya telah menggunakan read more secara manual? Tidak perlu cemas gan, karena tinggal ganti kodenya dan jrenk lihat hasil !!!

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua pilihan membuat read more otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Langkah awal membuatnya seperti biasa ya gan pilih Dashboard, lalu Tata Letak dan Edit Html, jangan lupa Contreng tulisan Expand Widget Templates.

Setelah itu, cari kode </head>,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://projectloss.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Selanjutny....

Cara 1.Read More Button Otomatis menggunakan gambar, hapus kode 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'><img alt='Read More..' src='http://www.arcsolutions.com/north_america/images/news-item-read-more.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/>
</b:if>

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/><br/>
</b:if>

Lalu Simpan Template, dan Jrenkkk lihat hasilnya :D
Bagi sobat yang udah terlanjur menggunakan Read More manual, tinggal hapus kode :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Baca selengkapnya <data:blog.pageTitle/></a>
</b:if>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2 ,Semoga berhasi

Thanks for reading Cara Membuat ReadMore Otomatis di Blogger