Automatic thumbnail on Blogger Readmore - Menampilkan Thumbnail di ReadmoreClick here to get more tutorials!

Contoh penggunaaan Automatic Thumbnail on Blogger Readmore.Jika anda menginginkan sebuah thumbnail selalu ditampilkan ketika readmore digunakan, ini akan menolong anda. Cara ini adalah sebuah pilihan menggunakan readmore tanpa javascript yang memungkinkan anda untuk tetap bisa mengatur seberapa banyak teks yang akan ditampilkan melalui readmore. Tentu saja kita harus menggunakan cara manual dengan memasukkan kode jump break. Menggunakan cara seperti ini adalah sebuah solusi ketika kita melihat bahwa "Auto Readmore with Thumbnail" tanpa script hanya menampilkan karakter posting sangat terbatas (sejumlah 140 karakter) sehingga readmore akan menyisakan ruang kosong yang cukup besar.

Memadukan readmore manual dengan automatic thumbnail (gambar thumbnail akan secara otomatis ditampilkan oleh blogger) membuat blogger dapat mengatur jumlah karakter (teks atau kalimat) yang akan ditampilkan menyertai readmore, sehingga readmore tidak lagi menyisakan banyak ruang kosong. Agar homepage terlihat lebih rapi, kita juga akan menambahkan kode css pembatas tiap posting.

Cara Membuat Automatic Thumbnail on Readmore

1. Login ke Blogger.
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Caranya bisa dibuka di siniPanduan cara melakukan backup-restore template.
5. Edit HTML
6. Template › Edit HTML
• Proceed (Lanjutkan)
• Expand Template Widget
• Cari kode (gunakan Ctrl+F):
  <data:post.body/>
  Anda akan menemukan 2 buah kode seperti ini di dalam template. Gunakan yang posisinya lebih di atas (yang pertama ditemukan dg tombol pencarian "next"). Perhatikan bahwa di bawah kode <data:post.body/> akan anda jumpai kode seperti berikut:
  

  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
  
      <b:if cond='data:post.hasJumpLink'>
        <div class='jump-link'>
          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
        </div>
      </b:if>

• Ganti <data:post.body/> dengan kode yang ada di bawah ini (xHTML Aitomatic Thumbnail on Readmore)
• Simpan Template (Save Template).
7. Selesai!

xHTML Automatic Thumbnail on Readmore

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.post-body img{display:none !important;}
.post{border:1px solid #777;border-radius:6px;padding:5px 10px 10px;}
</style>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='GRreadmore_thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' style='display:block !important;float:left;margin:0 15px 6px 0;' width='72px'/>
<b:else/>
<img alt='no image' class='GRreadmore_thumb' height='72px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QBm4gKoZYhDZh0Gl8A0xXbzsSQzgswh1g4V_qtxbIvTSgqGnYzm99ohE5zKnkujZpW-n7gCbWpZUGb1mc7Lb5odnpnkiMwSoKlKuh1qGrBgj9frKU5NCLId7oFOO-Mlxk-Yocfcr-N4/s1600/LogoAnimaGRBlue2.gif' style='float:left;margin:0 15px 6px 0;' width='72px'/>
</b:if>
<data:post.body/>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Keterangan/Catatan :

1. Automatic Thumbnail on Blogger Readmore sudah dicoba dan berhasil. Demo dapat anda buka di link berikut:
   DEMO Automatic Thumbnail on Blogger ReadmoreKlik di sini untuk melihat hasil kerja Automatic Thumbnail on Blogger Readmore (sekalipun hasilnya tak akan persis dengan bentuk di blog ini).
2. Anda dapat merubah tampilan thumbnail default (yang muncul ketika posting sama sekali tak memuat image) dengan mengganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QBm4gKoZYhDZh0Gl8A0xXbzsSQzgswh1g4V_qtxbIvTSgqGnYzm99ohE5zKnkujZpW-n7gCbWpZUGb1mc7Lb5odnpnkiMwSoKlKuh1qGrBgj9frKU5NCLId7oFOO-Mlxk-Yocfcr-N4/s1600/LogoAnimaGRBlue2.gif
3. Setelah kode Automatic thumbnail terpasang dengan sempurna, silahkan lakukan posting dan gunakan kode readmore (<!--more-->) atau gunakan fitur "Jump break", kemudian lihat hasilnya dengan membuka homepage (halaman utama blog).