Buat ReadMore otomatis dengan Gambar

obachti 95 - Buat kamu yang blognya belum pakai otomatis readmore wajib pakai trik ini, fungsinya supaya blog terlihat lebih rapi. Demonya bisa langsung lihat pada homepage saya, jika malas lihat homepage ane kasih screenshotnya deh : 

Skarang kita lanjut ke step berikutnya, bagaimana cara membuatnya :

1. Login blogger > Edit HTML > Backup dulu Template sobat, klik tulisan 

2. Jika sudah di Backup Template, centang Expand Template Widget

3. Carilah kode script <data:post.body/>, dan dan gantilah dengan kode script berikut :
"Jika ditemukan 2 kode scipt <data:post.body/>, gunakan yang pertama. Yang kedua biarkan saja"

<b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src="http://i1074.photobucket.com/albums/w404/atsarhjm/readmore-1.png"></img></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan :

summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman

* Script yang berwarna biru adalah button readmore nantinnya bagaimana, bisa sobat sesuaikan dengan selera sobat. namun untuk screenshotnya, url gambar diatas seperti ini ; . atau sobat juga bisa gunakan tulisan saja dengan cara mengganti kode yang berwarna biru dan merah dengan tulisan. misalnya : Read More atau Baca Selengkapnya

4. Sebelum disimpan templatenya, cari lagi kode script </head> dan letakkan kode berikut dibawahnya :

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://95forfriend.googlecode.com/files/readmore-otomatis.js' type='text/javascript'/>

Keterangan :

summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman
depanimg_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.

5. Simpan Template. Klik  

Jika merasa kesulitan, sobat tanyakan saja melalui komentar dibawah. Semoga Bermanfaat