Membuat Read More Otomatis di Blogspot

Wednesday, January 4, 2012

Membuat Read More Otomatis di Blogspot

Sekarang saya akan berbagi cara biar blog keliatan lebih ringkas dan simple,lebih enak dipandang,dan gak lemot ketika dibuka,maklum blog ini kebanyakan gambar.

Nah untuk mempersingkat postingan biasanya digunakan READ MORE.Sehingga tampilan depan blog gak jadi terlalu panjang cukup judul dan sekilas tentang isi postingan, kemudian terserah pembaca mau melanjutkan membaca atau gak.

Kebanyakan cara membuat READ MORE yang saya lihat ribet, harus isi coding dulu pas nulis di postingan, tapi akirnya saya menemukan cara membuat read more secara otomatis, jadi pas nulis ga perlu di isi coding tambahan pas di publish dengan sendirinya postingan sudah terpotong sesuai dengan keinginan anda. Seperti yang ada di blog saya.

Untuk membuat READ MORE otomatis ini langkah-langkahnya:

Login ke blog anda

masuk ke rancangan

klik edit HTML

centang Expand Widget

Tekan CTRL + F pada browses kemudian cari kode </head>

Tambahkan kode dibawah ini setelah 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://sites.google.com/site/rasiqzonetwork/javascript/readmore-otomatis.js' type='text/javascript'/>

Summary noimg 430 = tinggi artikel terpenggal tanpa image, Summar img 430 = tinggi artikel terpenggal dengan image, bisa anda ubah angkanya sesuai dengan selera anda.

Tekan CTRL + F pada browses kemudian cari kode <data:post.body/> atau <p><data:post.body/></p>

Kemudian ganti kode <data:post.body/> atau <p><data:post.body/></p>

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