Cara Membuat Auto Readmore Dengan Gambar - Ada baiknya jika artikel blog anda di halaman depan (homepage) diberi menu "baca selengkapnya" atau "readmore". Readmore atau baca selengkapnya berguna untuk merapikan tampilan homepage blog anda sekaligus membuat pengunjung lebih menjelajahi blog anda. Tanpa menu readmore, artikel blog anda akan tampil penuh di homepage dan tidak rapi. Sebenarnya menu readmore bisa dibuat secara manual disaat anda menulis artikel, tapi saya akan beri solusi yang lebih menarik dengan membuat auto readmore menggunakan gambar. Bagaimana caranya? Simak tutorial berikut!
1. Masuk ke akun blogger anda.
2. Pergi ke template -> edit HTML.
3. Cari kode </head> dengan bantuan ctrl+f.
4. Copy dan paste script berikut di bawah 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://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
5. Sekarang cari kode <data:post.body/> dengan bantuan ctrl+f (jika ada banyak, pilih kode yang kedua).
6. Anda hapus kode <data:post.body/> dan ganti dengan script berikut.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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='url gambar'/></a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<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='url gambar'/></a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Anda ganti text yang berwarna biru dengan url gambar yang akan digunakan sebagai readmore.
7. Jangan lupa simpan template.
NB : Tutorial ini sudah termasuk memperbaiki error yang ada pada laman. Laman tidak akan terpotong readmore dan bisa tampil penuh.
Berikut adalah pilihan gambar yang bisa anda gunakan.
Tombol readmore 1
http://3.bp.blogspot.com/-GQHaBLnzp4A/U3RVj8qbb_I/AAAAAAAADu8/Bu5Lq3to4hE/s1600/bacaselengkapnya.gif
Tombol readmore 2
http://4.bp.blogspot.com/-H6XQxiselfU/U3RX8x7OsuI/AAAAAAAADvE/zf7eg6GXlFE/s1600/readmore2.gif
Tombol readmore 3
http://1.bp.blogspot.com/-BZuSAD52eUY/U3RYaqx-ooI/AAAAAAAADvM/Yy7VBKqQGFQ/s1600/readmore3.gif
Tombol readmore 4
http://1.bp.blogspot.com/-lVnueUOlHUc/U3RZBJZ7yOI/AAAAAAAADvU/Tjt1qvOgLcE/s1600/readmore4.gif
Tombol readmore 5
http://3.bp.blogspot.com/-1VXz-cNLldU/U3RaIRrV4pI/AAAAAAAADvc/OO3cJorudps/s1600/readmore5.gif
Semoga bermanfaat ^_^
0 comments:
Posting Komentar
Hargai penulis dengan memberikan komentar yang baik dan mengklik iklan yang ada
Rules komentar :
1. No SPAM
2. No live link (link aktif)
3. Jika bertanya gunakan akun yang terdaftar
4. Komentar yang tidak pantas akan dihapus oleh admin