Rabu, 04 April 2012

Cara Membuat Read More di Blog Blogspot

Rabu, April 04, 2012

Hampir setiap blog yang kita jumpai menampilkan halaman utama dengan deretan posting yang terpotong dengan kata "read more". Metode ini mampu mempercantik tampilan blog dan mempersingkat load page. Sebenarnya ada opsi lain untuk mempersingkat blog yaitu dengan menampilkan hanya judul post saja tetapi akan menurunkan minat baca pengunjung, karena mereka tidak melihat konten post.

Tapi untuk kali ini saya hanya akan membahas bagaimana cara menampilkan hanya sebagian post (readmore)

Cara pertama dengan cara manual (seting tiap membuat post baru)
1. masuk ke blog kamu
2. buat post baru
3. setelah selesai jangan di Publish dulu tapi gunakn fitur "insert jump break". caranya letakkan cursor kamu di bagian yang ingin dipotong, lalu klik toolbar "insert jump break" lihat gambar di bawah

4. Publikasikan ,, cek tampilannya

Cara ke dua Yaitu otomatis Break post
1. masuk blog--> rancangan-->edit html --> expand template widget
2. cari tag </head> dengan Control+F
3. paste kode di bawah ini,, tepat di atas tag </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://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

kamu bisa ganti ukuran preview post sesuai keinginan kamu:summary_noimg = 430, tinggi post tanpa gambarsummary_img = 340; tinggi post dengan gambarimg_thumb_height = 100; tinggi gambarimg_thumb_width = 120; lebar gambar

4. cari lagi kode <data:post.body/>5. ganti kode tersebut dengan kode berikut

<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>

6. Kata Read more bisa kamu ganti dengan kata lain misal selengkapnya/lihat/ lainya sesuai keinginan kamu7. biasakan preview dulu sebelum save, jika berhasil baru save template.. OKoke silahkan mencoba,, gud luck!!