Cara mudah membuat Read More di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas
mengenai cara mudah membuat read more di blogspot atau blogger. Kenapa
cara membuat read more di wordpress
tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat
secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai
bahasan mengenai tipsnya
Bagaimana Cara membuat Read More otomatis di blogspot?
Caranya sangat mudah. Sebelum melangkah lebih baik kita tahu apa itu
read more? dan apa fungsi read more?
Read more
dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more
itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat
lebih rapi dan menarik.
Read more otomatis ini akan memotong
tampilan depan artikel yang panjang dan anda bisa menentukan berapa
banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung
membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca
artikel penuh blog anda.
Langkah-langkah cara membuat Read More Otomatis di Blogspot
- Login ke Blog anda
- Buka halaman design > Edit HTML > centang Expand template widget
- Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
- Paste kode berikut tepat dibawah </head>
<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://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
- Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>
( seperti biasan 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 != "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>
- Finish simpan template dan lihat hasilnya
Script tersebut 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.
No comments:
Post a Comment