Membuat Auto Read More dengan Gambar Thumbnail
Versi ini adalah hack script dari Rilwis yang telah di update dan dimodifikasi untuk membuatnya lebih usefull/multi guna. Lebih banyak fitur-fitur yang dapat Sobat manfaatkan untuk membuat auto readmore yang user friendly, seperti : thumbnails floating,post skipping, ringkasan dengan dan tanpa thumbnails dan beberapa fitur utama new update, yaitu :
1.Terdapat Automatic default thumbnail image ketika postingan tidak mempunyai atau disertakan gambar/ image di dalamnya.
2.Dapat dengan mudah untuk membuat turn off/disable auto read more untuk beberapa posting pertama.
3.Opsi turn on/off auto readmore pada homepage and label page.
Sebelum mulai membuat Auto Read More, check jika Anda telah memasang Read More Link atau Auto Read More link di template, maka hapus kodenya dahulu semuanya. Caranya ikuti petunjuk Cara Menghapus Read More/Auto Read More Link di Blogger
1. Masuk ke Blogger Dashboard > Template
2. Backup template Anda
3. Click Edit HTML
4. Lanjutkan
5. Check Expand Widget Template checkbox
6. Cari code tag </head>
Untuk memudahkan pencarian gunakan Control + F
7. Tambahkan / letakkan kode berikut tepat diatas tag </head>
Kode nya :
<script type='text/javascript'>
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 120,
imgHeight: 90,
defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrNenZWXmWnew75exxvJ_xJ0OMV9_XFc1rn1TDqY1aXx8JOwDIITZFZa9VhrTi8kFA8gs1HJxkxKbC1VHfD0vdnfOaV-O7ImXYDkWQAFMxKY4B2z2Td23SQmxDwvMdeay1NXHuSoZZ1k/s1600/no-thumb.jpg',
words: 65,
wordsNoImg: 80,
skip: 0,
showHome: true,
showLabel: true
};
</script>
<script src='http://problogizjs.googlecode.com/files/autoreadmore.js' type='text/javascript'/>
8. Cari tag line <div class='post-body entry-content'>
9. Letakkan kode berikut tepat dibawah tag <div class='post-body entry-content'>
Kode nya :
<span expr:id='data:post.id'><data:post.body/></span> <b:if cond='data:blog.pageType == "index"'> <script type='text/javascript'>summary("<data:post.id/>")</script> <span style='float:right;padding-top:12px;'><a expr:href='data:post.url'>Read More</a></span> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <script type='text/javascript'>summary("<data:post.id/>")</script> </b:if> </b:if>
10. Klik Pratinjau / Preview, setelah semua OK
Save / Simpan Template
Kostumisasi Fitur
Anda dapat merubah code control fitur yang telah diberi warna-warna pada script auto read more diatas, antara lain :
showImage: true, Jika Sobat tidak ingin menampilkan gambar thumbnail ganti "true" menjadi "false"
imgFloat: 'left', Jika ingin posisi gambar di sebelah kanan ganti menjadi 'right'
imgWidth: 120, Ukuran lebar gambar
imgHeight: 90, Ukuran tinggi gambar
defaultThumb:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrNenZWXmWnew75exxvJ_xJ0OMV9_XFc1rn1TDqY1aXx8JOwDIITZFZa9VhrTi8kFA8gs1HJxkxKbC1VHfD0vdnfOaV-O7ImXYDkWQAFMxKY4B2z2Td23SQmxDwvMdeay1NXHuSoZZ1k/s1600/no-thumb.jpg', Gambar default ini muncul jika postingan tidak ada gambarnya. Sobat juga bisa menggantinya dengan url gambar pilihan sendiri.
words: 65, Jumlah kata jika ringkasan dengan thumbnail
wordsNoImg: 80, Jumlah kata jika ringkasan tanpa thumbnail
skip: 0, untuk buat on/off fungsi
auto readmore pada beberapa postingan. Jika di set angka "0" maka
berarti all post/semua postingan diterapkan fungsi auto readmore
showHome and showLabel:
fungsi auto readmore pada halaman page dan label page. Jika di set
"true" maka fungsi auto readmore enable/on dan "false" berarti
off/disable
Ditulis Oleh : friend of the night ~ Bloger
Sobat sedang membaca artikel tentang Membuat Auto Read More dengan Gambar Thumbnail. Oleh Admin, Sobat diperbolehkan mengcopy paste dengan menggunakan Ctrl C dan menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
