Cara membuat read more otomatis

Ada banyak cara membuat readmore otomatis, baik itu berupa tulisan maupun berupa button/tombol yang disertai dengan gambar (image). Sebelum masuk kepembahasan alangkah baiknya saya sedikit menjelaskan fungsi dari readmore ini. Fungsi utama readmore ini yaitu membatasi bagian dari postingan, sehingga potongan postingan berikutnya dapat dibaca dengan mengklik tombol readmore atau tulisan readmore itu. Dengan menggunakan fungsi readmore kita dapat memaksimalkan halaman utama blog, sehingga halaman utama dapat menampilkan lebih banyak artikel. Sebenarnya blogger sudah memfasilitasi untuk membuat readmore, namun banyak yang tidak puas dan ingim memodifikasinya dengan menggunakan image. Untuk itu, saya akan menjelaskan bagaimana cara membuat readmore otomatis menggunakan gambar (image).

Perhatikan langkah-langkahnya :

1. Seperti biasa, Login ke akun blogger Anda

2. Klik rancangan

3. Pilih Edit HTML

4. Beri cantang/ceklis kotak Expand Widget Template

Untuk lebih jelasnya lihat gambar dibawah ini :

Pilih Rancangan

Klik Edit HTML

Beri centang/ceklis Expand Widget Template

5. Cari kode </head> ( Gunakan Ctrl + f untuk memudahkan pencariah )

6. Kemudian masukkan kode berikut ini debawah kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://readmore-otomatis-js.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

7. Langkah selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>

• Jika Anda ingin membuat readmore otomatis menggunakan image atau gambar, hapus kode tesebut dan ganti dengan kode berikut 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:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='Read More..' src='http://3.bp.blogspot.com/-2l_jbH97Np8/Tden8SFH0oI/AAAAAAAAAGE/0pB27gilDCM/s1600/icon+read+more8.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/><br/><p align='right'>
<a href='http://super-bee.blogspot.com'>| <em>Supported link</em> |</a></p></b:if>

• Dan jika Anda ingin menggunakan readmore otomatis hanya berupa text atau tulisan ganti kode seperti no.7 tadi 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:right;padding-top:20px;'>

<a expr:href='data:post.url'>[ Read More.. ]</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/><br/><p align='right'>

<strong><a href='http://super-bee.blogspot.com'>| <em>Supported?</em> |</a></strong></p></b:if>

8. Klik pratinjau untuk melihat hasilnya jika sudah sesuai

9. Save.

Namun jika Anda sudah terlanjur membuat readmore secara manual dan ingin merubahnya secara otomatis, yang Anda lakukan adalah menghapus kode seperti 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/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Kemudian ganti dengan kode yang telah dijelaskan di atas, apakah anda ingin menggunakan readmore otomatis menggunakan gambar atau readmore otomatis yang menggunakan text.

Untuk kode yang berwana merah adalah merupakan url gambar readmore, jika anda ingin menggantinya dengan url gambar read yang lain silahkan klik disini