30 Desember 2009

"Read More..." Blogger


Kali ini, postingan akan membahas bagaimana Cara Membuat "Read More..." secara otomatis pada postingan blog secara otomatis. Dengan adanya "Read More..." otomatis, kita hanya tinggal menentukan berapa tinggi kutipan postingan, lebar kutipan postingan, dan image yang akan muncul pada kutipan postingan dihalaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini juga sudah banyak ditemukan di tempat lain, kalau mau check, silahkan check, buka Google.Com, terus masukkan kata-kata "membuat readmore otomatis", pasti banyak. ^_^

Karena menurut saya ini bermanfaat dan harus di bagi-bagikan, berikut ini saya lampirkan langkah-langkahnya:

1. Silakan masuk ke acount blogger anda kemudian, pilih tab "Tata Letak" / "Layout",
2. Setelahitu pilih "Edit HTML",
3. Lakukan pemberian tanda ceklis pada bacaan "Expand Widget Template" / "Expand Template Widget",
4. Cari kode "</head>", (menggunakan menu find "Ctrl+f")
5. Kemudian masukkan script di bawah ini persis dibawah 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://komunitaskita.net/wp-content/uploads/2010/10/read-moreotomatis.js' type='text/javascript'/>

6. Setelah itu, cari kode <data:post.body/> atau <p><data:post.body/></p>

7. Ganti kode <data:post.body/> atau <p><data:post.body/></p> dengan script 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'>»» READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

8. Save Template.

Setelah itu, silahkan check postingannya, sudah berubah atau belum. Silahkan dicoba.

Keterangan:
- summary_noimg = 430 artinya tinggi artikel terpenggal tanpa image.
- summary_img = 340 artinya tinggi artikel terpenggal dengan image.
- img_thumb_height 100 artinya ukuran tinggi dari image yang akan ditampilkan di halaman depan.
- img_thumb_width = 120 artinya ukuran lebar dari image yang akan ditampilkan di halaman depan.
- "Read More..." bisa anda ganti dengan "Baca Selengkapnya", "full read", dan lain-lainnya.