Membuat Auto Read More dengan Gambar Thumbnail versi 2

proBlogiz

---

Ini tutorial Blogger berseri dari cara Membuat Auto Read More dengan Gambar Thumbnail versi 2 di Blogger, lanjutan dari Auto Read More versi 1. Pada seri Membuat Auto Read More dengan Gambar Thumbnail versi II ini, masih melakukan metode blogger hack untuk membuat post summary ( ringkasan ) dengan thumbnail secara otomatis di halaman utama blog. Versi ini adalah hack script dari Rilwis yang telah di update dan dimodifikasi beberapa oleh proBlogiz, untuk membuatnya lebih usefull/multi guna. Lebih banyak fitur-fitur yang dapat Anda 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

Langkah Pemasangan Kode Script Auto Read More versi 2

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> ---> gunakan Control + F

7. Tambahkan / letakkan kode berikut tepat diatas tag </head>

<script type='text/javascript'>
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFy-rePVk3LlBAj0WWCJdnoJW_hHrkZDnzDnnu2OVv-4Z2ldIRe1EUSegFgc00K-5_wj6F0E3tEQmf2O_Lptc5mmAkS3s_7N-BqBz7mNLZwkJuqTfb44-rIWDPK7hXgmXyqFtiRSnWWY/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'>
    Letakkan kode berikut tepat dibawah tag <div class='post-body entry-content'>

<span expr:id='data:post.id'><data:post.body/></span>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</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 == &quot;archive&quot;'>
        <script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</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 Anda 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/AVvXsEikFy-rePVk3LlBAj0WWCJdnoJW_hHrkZDnzDnnu2OVv-4Z2ldIRe1EUSegFgc00K-5_wj6F0E3tEQmf2O_Lptc5mmAkS3s_7N-BqBz7mNLZwkJuqTfb44-rIWDPK7hXgmXyqFtiRSnWWY/s1600/no-thumb.jpg', Gambar default ini muncul jika postingan tidak ada gambarnya. Anda 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

Itulah kawan, cara membuat Auto Read More versi 2, semoga bisa membantu Anda. Lihat juga :

Membuat Auto Read More dengan Gambar Thumbnail versi 1 
Membuat Auto Read More dengan Gambar Thumbnail versi 3 
Membuat Read More Link ( no hack )

Selamat mencoba!!

Jika mendapatkan problem / masalah terkait artikel ini, jangan sungkan ditanyakan di form komentar.