UTAK-ATIK KOMPUTER: Cara Membuat Readmore dengan Gambar

Minggu, 23 Desember 2012

Cara Membuat Readmore dengan Gambar

Kali ini ada trik yang ingin saya bagikan yaitu mengubah teks readmore dengan gambar. Secara otomatis apabila anda memposting maka gambar readmore akan nampak pada home page. Jika sobat ingin tau
caranya ikuti langkahnya berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Template Widget
4. Cari kode ini </head>
5. Kopi kode dibawah ini dan paste dibawah kode diatas:

<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://blogtrikdantips-blogspot.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Keterangan :
summary_noimg = 430; adalah jumlah karakter yang akan ditampilkan tanpa gambar
summary_img = 340; adalah jumlah karakter yang akan ditampilkan dengan gambar
img_thumb_height = 100; adalah ukuran tinggi gambar
img_thumb_width = 120; adalah lebar gambar

6. Carilah kode <data:post.body/>
7. Hapus kode diatas dan ganti dengan kode 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'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan:
Kode berwarna merah diatas adalah gambar atau teks yang ingin ditampilkan pada readmore. Untuk contoh gambar sobat dapat lihat dibawah ini:

http://i785.photobucket.com/albums/yy131/djnand/Button_ReadMore_Reflective.jpg