Rabu, 23 Mei 2012

Read More Otomatis pada Template Blogger

Kali ini kita akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini gan, yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali, seperti biasa ya gan pilih Dashboard, lalu Tata Letak dan Contreng tulisan Expand Widget Templates.
Selanjutnya, cari kode </head>, setelah ketemu tepat di BAWAH nya letakkan kode javascript berikut:
<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'/>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p> (seperti biasa gunakan CTRL + F untuk mempermudah pencarian). Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.

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>

Lalu simpan templates.

Membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :
  • 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 depan
  • img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
  • Anda 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 anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda 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.
Semoga bermanfaat....@vho!!!

2 comments:

  1. Thanks Gan....
    Ane berhasil...
    Untuk lihat hasilnya
    mari Invite My Web Blog http://fredibelajar.blogspot.com/

    BalasHapus
    Balasan
    1. sama2 mas bro...indahnya berbagi....blog anda bagus skali...!!!

      Hapus

Tinggalkan "Jejak Sahabat" dalam kotak komentar. Gunakanlah opsi Name/URL, mohon jangan komentar SPAM yaitu komentar dengan menyertakan LINK / ANCHOR TEXT. Terima Kasih.