Cara Membuat Readmore Otomatis Menggunkan Gambar Atau Teks
Hai sobat semua kali ini blog ini akan membahas tentang Cara Membuat Readmore Otomatis Menggunkan Gambar Atau Teks,
kalo biasanya menggunakan teks saja atau gambar saja maka kali ini blog
ini akan lansung memberikan keduanya, jadi terserah sobat mau
menggunakn readmore dengan icon gambar atau dengan teks.
Oke dah lansung aja kita bahas caranya:
1.Pertama-tama sobat harus login ke blogger sobat.
2.Pada tab menu pilih Rancangn - Edit HTML.
3.Selanjutnya cari kode </head>
4.Jika kode </head> sudah ketemu selanjutnya copy kode berikut dan paste atau letakkan di atas kode </head>
5. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>. Jika menemukan 2 kode yang sama, pilih kode yang pertama.
6.Jika sudah ketemu selanjutnya silahkan sobat ganti kode tersebut dengan kode berikut:
7.Klick pertinjauan lebih dahulu, jika sudah berhasil baru klick simpan.
Keterangan :
pada kode diatas terdapat beberapa kode yang bisa sobat ubah sesuai keinginan sobat, diantaranya:
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.
Sobat juga bisa mengubah Icon read more
Silahkan sobat ganti dengan icon readmore lainnya atau dengan teks seperti:
Maka sobat tinggal menghapus / mengganti kode <img src="http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.
Sumber : http://otowebsite.blogspot.com/2012/05/cara-membuat-readmore-otomatis.html
Oke dah lansung aja kita bahas caranya:
1.Pertama-tama sobat harus login ke blogger sobat.
2.Pada tab menu pilih Rancangn - Edit HTML.
3.Selanjutnya cari kode </head>
4.Jika kode </head> sudah ketemu selanjutnya copy kode berikut dan paste atau letakkan di atas kode </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://otowebsite.googlecode.com/files/read-moreotomatis.js'
type='text/javascript'/>
5. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>. Jika menemukan 2 kode yang sama, pilih kode yang pertama.
6.Jika sudah ketemu selanjutnya silahkan sobat ganti kode tersebut dengan kode berikut:
<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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png"></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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
7.Klick pertinjauan lebih dahulu, jika sudah berhasil baru klick simpan.
Keterangan :
pada kode diatas terdapat beberapa kode yang bisa sobat ubah sesuai keinginan sobat, diantaranya:
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.
Sobat juga bisa mengubah Icon read more
http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png
Silahkan sobat ganti dengan icon readmore lainnya atau dengan teks seperti:
Read more>>, atau Baca Selengkapnya>>
Maka sobat tinggal menghapus / mengganti kode <img src="http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.
Sumber : http://otowebsite.blogspot.com/2012/05/cara-membuat-readmore-otomatis.html
..: Semoga Bermanfaat :..
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar