Readmore Otomatis dg Posting Terbaru Tanpa ReadmoreClick here to get more tutorials!

Readmore otomatis dg thumbnail dan tanpa thumbnail (gambar berukuran kecil) ini dibuat tanpa menggunakan javascript ataupun jquery. Readmore otomatis ini hanya dibuat dengan merubah kode html template memanfaatkan kode snippet. Yang membuat readmore ini sangat spesial adalah kemampuannya untuk membuat posting terbaru ditampilkan tanpa readmore sementara seluruh posting yang lain tetap ditampilkan dengan bentuk readmore otomatis. Ada dua versi kode readmore otomatis yang dapat kita manfaatkan.

1. Readmore Otomatis (Auto Readmore) tanpa thumbnail (image kecil).
2. Readmore Otomatis (Auto Readmore) dengan thumbnail (gambar kecil)

Cara menggunakan kode readmore otomatis :

1. Login ke Blogger
2. Dasboard (Dasbor)
3. Template
4. Edit HTML
5. Proceed (lanjutkan)
6. Template › Edit HTML
• 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 readmore otomatis tanpa thumbnail (xHTML-1) atau dengan thumbnail (xHTML-2a dan xHTML-2b).
• 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>

Readmore Otomatis tanpa Thumbnail (xHTML-1)

Semua posting kecuali posting terbaru akan mempunyai readmore. Posting yang menggunakan readmore akan ditampilkan tanpa thumbnail (image berukuran kecil). Jadi posting di home page (kecuali posting terbaru) hanya menampilkan teks.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<style type='text/css'>
.post{padding:10px;border:1px solid #eee;border-radius:6px;box-shadow:0 0 6px #aaa;}
</style>
<data:post.body/>
<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>
<b:else/>
<div style='margin-bottom:10px;'>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title' style='font-size:14px;font-weight:bold;'><data:post.jumpText/></a>
</div>
    </b:if>
<b:else/>
<div style='margin-bottom:10px;'>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title' style='font-size:14px;font-weight:bold;'><data:post.jumpText/></a>
</div>
    </b:if>
<b:else/>
<data:post.body/>
  </b:if>
<b:else/>
<data:post.body/>
</b:if>

Readmore Otomatis dengan Thumbnail (xHTML-2a)

Readmore hanya akan menampilkan thumbnail jika posting memuat image. Jika posting sama sekali tak melibatkan image, maka readmore juga tak akan menampilkan thumbnail.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <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>
   <b:else/>
    <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:if>
  <b:else/>
   <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:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Readmore Otomatis dengan Thumbnail (xHTML-2b)

Readmore akan selalu menampilkan thumbnail sekalipun posting tak memuat image. Jika posting sama sekali tak memuat image maka readmore akan menampilkan thumbnail default yang disertakan dalam readmore otomatis.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <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>
   <b:else/>
    <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:if>
  <b:else/>
   <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:if>
 <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.