Auto Readmore sangat berguna bagi para blogger untuk memperindah sekaligus mengefisiensikan halaman utama pada blog kita. Dengan adanya auto readmore maka tampilan halaman utama pada blog dapat dipenuhi oleh berbagai artikel yang kita posting sehingga menarik pengunjung untuk terus berselancar di blog kita. Pada artkel ini saya akan berbagi tutorial cara memasang Auto Readmore di Blogger.
Berikut langkah-langkahnya:
1. Masuk ke editor template HTML. Download template terlebih dahulu untuk keamanan.
2. centang expand widgets template.
3. Masukkan script berikut tepat sebelum tag </head> (gunakan Ctrl+F untuk mencari)
2. centang expand widgets template.
3. Masukkan script berikut tepat sebelum tag </head> (gunakan Ctrl+F untuk mencari)
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
Keterangan:
-summary_noimg = 230; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-summary_img = 140; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-img_thumb_height = 100; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.
-img_thumb_width = 100; adalah lebar gambar thumbnail, anda dapat mengubah nilainya.
Tapi untuk amannya tinggalkan begitu saja.
-summary_noimg = 230; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-summary_img = 140; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-img_thumb_height = 100; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.
-img_thumb_width = 100; adalah lebar gambar thumbnail, anda dapat mengubah nilainya.
Tapi untuk amannya tinggalkan begitu saja.
4. Lanjutkan dengan mencari <data:post.body/> (seperti biasa, gunakan senjata Ctrl+F)
5. Lalu ganti <data:post.body/> dengan script berikut:
5. Lalu ganti <data:post.body/> dengan script berikut:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
Keterangan:
-padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.
-float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri.
-Anda bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this entry", "Lanjut gan...", "Monggo dilanjut!", atau apa sajalah...
Tapi untuk amannya tinggalkan begitu saja.
-padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.
-float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri.
-Anda bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this entry", "Lanjut gan...", "Monggo dilanjut!", atau apa sajalah...
Tapi untuk amannya tinggalkan begitu saja.
6. Untuk memastikan hasilnya, jangan di-save dulu. Gunakan preview untuk mengeceknya.
7. Setelah beres, silakan di-save.
8. Selesai.
7. Setelah beres, silakan di-save.
8. Selesai.
Semoga Bermanfaat...
loading...
EmoticonEmoticon