Cara membuat read more otomatis di blogspot sangat
mudah. Sebelum melangkah ke cara membuat read more otomatis di
blogspot 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. Sekarang lanjut ke langkah cara membuat read more otomatis di
blogspot.
Langkah-langkah cara membuat Read More
Otomatis di Blogspot:
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
4.
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'/>
5. Selanjutnya
cari 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.
6.
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>
<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>
7.
Finish
simpan template dan lihat hasilnya
a) Cara
membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang
bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :
b) summary_noimg = 430; apabila artikel
anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430
huruf
c)
summary_img = 340; apabila artikel
anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf
dan gambar
d)
img_thumb_height = 100; ini adalah ukuran
tinggi gambar / thumbnail yang akan muncul di halaman depan
e)
img_thumb_width = 120; sedangkan yang
ini adalah lebar gambar / thumbnail di halaman depan.
f) 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 artikel cara membuat read more
otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.
Referensi:
http://www.bamz.us
0 komentar:
Post a Comment
Silahkan tinggalkan komentar anda tentang tulisan ini...