Membuat Readmore Automatis Dgn Gambar

Minggu, 25 Maret 2012


 
 Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, Tutorial blogging kali ini yaitu Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, Sebenarnya ini adalah request dari temen saya yang kesulitan membuat Readmore, semoga dengan artikel ini dapat terbantu.  Pasti sudah tahu Readmore kan, nah jika blog kamu belum mempunyai readmore, alias artikelnya masih memanjang, nah untuk itu agar tampilanya lebih rapi sebaiknya kamu memasang Readmore di blog kamu, disini saya akan memberikan Tutorial Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, seperti judulnya dengan kode dibawah ini kamu bisa membuat Readmore yang menggunakan Icon Gambar atau hanya menggunakan Teks. Nah langsung saja ini dia Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks :


1. Login ke Blog anda
2. Buka halaman design > Edit HTML > centang Expand template widget
3. Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
     Paste kode berikut tepat dibawah </head>

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


4. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  . Jika menemukan 2 kode yang sama, pilih kode yang pertama.
 Silakan Gunakan Ctrl+F Agar Cepat Ditemukan..


5. Jika sudah ketemu silahkan anda ganti kode tersebut 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>


6. Klik Pratinjau, jika sudah berhasil silahkan klik SIMPAN

  • Keterangan :
  • pada kode diatas terdapat beberapa kode yang bisa kamu ubah sesuai keinginan kamu, ini dia.
  • summary_noimg = 430; angka 430 adalah jumlah karakter yang akan ditampilkan jika tidak menggunakan gambar.
  • summary_img = 340; jika menggunakan gambar, angka 340 adalah jumlah karakter yang akan ditampilkan.
  • img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul.
  • img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail.

  • Kamu  juga bisa mengubah Icon read more  
  • http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif
  • Silahkan diganti URL icon yang kamu inginkan. Atau jika kamu ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya, 
  •  Read more>>, tau Baca Selengkapnya>>
  • Maka kamu tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

0 komentar:

Posting Komentar

ALAN B A E
Energy Saving Mode using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Original design by: alanbae-inc.blogspot.com
 
™Alan Bae Rezpector™ © 2011 | Design Template by Rizky wardiansyah | Template Blogger Name | Template Transparent 2.0 | Template Transparent 2.0