Membuat Auto Readmore

Membuat Auto Readmore - Pada kesempatan kali ini akan saya share tutorial mengenai cara membuat auto readmore. Tampilannya memang sangat sederhana dan biasa-biasa saja, namun sangat bermanfaat sekali bagi kerapian struktur tampilan dari setiap postingan yang berada di halaman awal (beranda) blog kita.
Oke, langsung saja bagi yang berminat untuk membuat auto readmore ini silahkan ikuti langkah-langkah seperti berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode </head> dan letakkan script kode berikut ini di atasnya :

<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://u-sup.googlecode.com/files/summarypost.js' type='text/javascript'/> 

5. Setelah itu, cari kode <data:post.body/> dan hapus atau ganti kode tersebut 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'> Read More </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

6. Klik save/simpan template, dan lihat hasilnya...

Note :
summary_noimg = 300 adalah panjang ringkasan tulisan dari setiap postingan yang tidak memiliki gambar.
summary_img = 300 adalah panjang ringkasan tulisan dari setiap postingan yang memiliki gambar.
img_thumb_height = 150 merupakan ukuran tinggi gambar thumbnail dari postingan tersebut.
img_thumb_width = 150 merupakan ukuran lebar gambar thumbnail dari postingan tersebut.
Anda bisa menyesuaikannya sesuai dengan selera anda.

Tweet