Cara Membuat ReadMore di Blogger

Readmore oh Readmore, yap in adalah salah satu fitur blogger yang digunakan untuk menyingkat postingan, artinya kata yang ditampilkan. Kita biasa lihat juga kan yang tulisan "Baca Selengkapnya" atau "Read More". nah pada tutorial kali ini saya akan membahas bagaimana cara menaruh fitur tersebut di dalam blog sobat. yap walaupun beberapa template sekarang sudah mendukung fitur ini. Langkah2nya adalah :

1. Masuk ke Blogger.com

2. Pilih Rancangan --> Edit HTML --> Backup template terlebih dahulu Lihat disini, setelah itu centang Expand Template Widget.

3. Cari kode ini </head> gunakan ctrl+f untuk mempermudah pencarian. Lalu copas kode css dibawah ini dan letakan setelah/dibawah kode </head>.

<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://hzndi.googlecode.com/files/hzndi-readmore.js' type='javascript'/>

4. Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>. hapus kode tersebut dan ganti dengan kode dibawah ini.

<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://hzndi.googlecode.com/files/hzndi%27s%20blog%20read%20more.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
</p></b:if>

5. Simpan Template !

*NOTE : Jika template kamu sudah menggunakan fitur readmore juga, hapus kodenya dan ganti dengan kode diatas. Ganti kode yang berwarna biru dengan alamat gambar yang kamu simpan :)

Postingan Terkait:

Posted in: Blogger