Trik Buat Read More Otomatis tanpa JavascriptClick here to get more tutorials!

Membuat readmore otomatis bertujuan untuk mempermudah posting & untuk membuat semua posting terlihat rapi di home page. Menggunakan readmore juga berujuan untuk memperingan loading blog saat dibuka, terlebih jika home page berisi beberapa posting sekaligus.

Berbagai trik membuat readmore otomatis dapat kita jumpai melalui berbegai tutorial blogger, baik berbahasa Indonesia ataupun Inggris. Ada yang menggunakan javascript, jquery atau hanya menggunakan kode css & xHTML. Ada dua pilihan tampilan saat menggunakan auto readmore.

1. Auto Readmore (Readmore Otomatis) tanpa thumbnail:
   Readmore seperti ini akan menampilkan keseluruhan posting tanpa menyertakan thumbnail (gambar/image). Jumlah karakter yang ditampilkan biasanya dapat diatur (auto readmore dengan javascript dan jQuery).
2. Auto Readmore with thumbnail (Readmore Otomatis dengan menyertakan thumbnail atau image berukuran kecil) :
   Posting di home page ditampilkan beserta sebuah thumbnail berukuran dibawah 100 x 100 pixel (px). Posisi thumbnail dapat diatur disebelah kiri atau kanan halaman. Jumlah karakter dapat diatur demikian pula ukuran thumbnailnya. Jika kita menggunakan javascript, readmore otomatis dengan thumbnail dapat juga dirubah menjadi readmore otomatis tanpa thumbnail/image. Kode CSS dan xHTML dan javascript sekaligus harus ditambahkan dalam template dengan posisi penyimpanan kode di antara tag pembuka dan penutup head & body. Namun demikian jika ingin lebih praktis, semua kode yang digunakan bisa disimpan di antara tag pembuka & penutup body.

Karena blogger belum menyertakan fitur pengaturan auto readmore, agar posting blog membentuk fungsi readmore otomatis, maka pada kesesmpatan ini kita kan membuatnya hanya menggunakan kode css & xHTML. Beberapa kode html baru akan ditambahkan sekaligus sebagai pengganti kode html default blogger.

Cara membuat auto readmore dg thumbnail :

1. Login ke Blogger.
2. Dasbor (Dasboard)
3. Template
4. Backup Template. Caranya bisa dibuka di sini.
5. Edit HTML
6. Template › Edit HTML
• Proceed (Lanjutkan)
• Expand Template Widget
• Cari kode :
  <data:post.body/>
  Anda akan menemukan 2 buah kode seperti ini di dalam template. Gunakan yang posisinya lebih di atas. 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 kode yang berwarna merah dengan kode baru dibawah (xHTML Readmore Otomatis)
• Simpan Template (Save Template).
7. Selesai!

xHTML Readmore Otomatis

<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 expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' 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>