Home » » Cara Membuat Readmore dengan Gambar

Cara Membuat Readmore dengan Gambar

Redi Apri Handoko | 17.10 | 0 comments
Kita sebelumnya telah belajar fungsi dari readmore yang mana adalah untuk memperpendek posting pada home page anda. 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 = &quot;no-float&quot; ; 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 != &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://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 == &quot;item&quot;'><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
http://i785.photobucket.com/albums/yy131/djnand/but_moreinfoorange.gif
http://i785.photobucket.com/albums/yy131/djnand/readMorehitam.png
http://1.bp.blogspot.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif%27

8. Simpan template sobat

Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Cara Membuat Readmore dengan Gambar Di posting oleh Redi A.H pada 11 Jul 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google