Auto Readmore dg Thumbnail tanpa Script - Read More Otomatis BloggerClick here to get more tutorials!

Readmore otomatis tanpa javascript dengan thumbnail (image atau gambar berukuran kecil) mampu membuat sebuah fungsi readmore otomatis yang dilengkapi dengan sebuah thumbnail, baik untuk posting yang didalamnya menyertakan gambar ataupun tidak (jika posting tanpa gambar maka dalam homepage akan disertakan thumbnail default readmore otomatis). Jika posting menyertakan gambar maka thumbnail akan mengambil dari salah satu image (jika ada banyak posting image). Blogger secara otomatis akan memotong image dalam ukuran yang telah ditentukan menjadi sebuah thumbnail yang menyertai fungsi auto readmore. Melalui kode css posisi thumbnail dapat diatur (di kanan atau kiri).

Readmore memang menjadi daya tarik tersendiri dalam blog. Berbagai bentuk readmore automatis diciptakan, baik menggunakan javascript, jQuery atau hanya dengan kode css & xHTML. Readmore otomatis berfungsi untuk memotong posting (teks) dengan model pengaturan pembatasan jumlah karakter teks yang ditampilkan di home page (halaman utama). Jika kita gunakan javascript, perubahan jumlah karakter pada readmore otomatis dapat diatur, baik saat menggunakan auto readmore with tuhmnail ataupun yang hanya berupa teks. Untuk readmore automatis yang dibuat dengan memodifikasi kode html blogger, jumlah karakter yang akan ditampilkan sekitar 140 karakter.

Memanfaatkan Read otomatis membuat blogger tak perlu lagi menuliskan kode untuk readmore atau memanfaatkan fitur Insert jump break, karena readmore akan terbentuk secara otomatis dengan menampilkan 140 karakter teks posting. Image (thumbnail) akan ditampilkan disisi sebelah kiri atau kanan tergantung posisi yang diinginkan.

Kode HTML readmore otomatis dengan thumbnail:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='GRreadmore_thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px' style='float:left;margin:0 15px 6px 0;' />
   <b:else/>
    <img class='GRreadmore_thumb' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QBm4gKoZYhDZh0Gl8A0xXbzsSQzgswh1g4V_qtxbIvTSgqGnYzm99ohE5zKnkujZpW-n7gCbWpZUGb1mc7Lb5odnpnkiMwSoKlKuh1qGrBgj9frKU5NCLId7oFOO-Mlxk-Yocfcr-N4/s1600/LogoAnimaGRBlue2.gif' width='72px' height='72px' style='float:left;margin:0 15px 6px 0;'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title' style='float:right;margin-top:30px;'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Keterangan :

1. Kode di atas akan menempatkan thumbnail di sebelah kiri teks (bagian kiri halaman posting). Jika ingin merubah thumbnail di posisi sebelah kanan, ganti float:left;margin:0 15px 6px 0; dengan float:right;margin:0 0 6px 15px;
2. Jika ingin teks Readmore berada di sebelah kiri, ganti float:right;margin-top:30px; dengan float:left;margin-top:30px;
3. Untuk merubah ukuran thumbnail, ganti width='72px' height='72px' dengan ukuran yang diinginkan.

Cara membuat auto readmore with image:

1. Login ke Blogger
2. Dasboard (Dasbor)
3. Template
4. Backup/Restore Template. Caranya dapat anda buka di siniPanduan cara melakukan backup-restore template.
5. Edit HTML
6. Template › Edit HTML
• Proceed (Lanjutkan)
• Expand Template Widget
• Cari kode <data:post.body/>
  Gunakan Ctrl+F untuk mempermudah & mempercepat pencarian kode.
• Kode di atas ada lebih dari satu. Temukan yg di bawahnya ada kode seperti di bagian bawah.
• Ganti <data:post.body/> dengan kode yang telah disertakan di baian atas (Kode HTML Readmore Otomatis dg Thumbnail).
• Simpan Template (Save Template)
• Selesai!
7. Buka blog anda (home page) dan lihat hasilnya!

kode HTML di bawah <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>

keterangan :

1. Dengan digunakannya auto readmore with thumbnail ini maka semua posting dihalaman utama blog (home page) akan selalu menyertakan fungsi readmore dimana dalam setiap posting ditambahkan sebuah thumbnail.
2. Jika salah satu atau beberapa posting tanpa memuat image maka akan ditampilkan sebuah thumbnail default readmore otomatis.
3. Sekalipun di home page memuat thumbnail, namun ketika halaman posting (posting blog) dibuka maka semua thumnail tak akan terlihat.