Readmore Otomatis tanpa Thumbnail

Mungkin saja anda menginginkan halaman utama blog (home page) bersih dari image atau gambar, sehingga yang terlihat hanya teks semata. Ada sebuah cara untuk menciptakan kondisi seperti ini dengan membuat sebuah readmore otomatis yang sekaligus akan memperingan pekerjaan karena anda tak perlu memasukkan kode readmore secara manual. Readmore automatis tanpa thumbnail bekerja dengan memanfaatkan kode snippet dan hanya dibuat dengan sedikit merubah kode html template. Karena hanya memanfaatkan kode snippet default blogger, maka readmore otomatis ini hanya akan menampilkan teks di home page berkisar 140 karakter.

Cara membuat auto readmore dg thumbnail :

1. Login ke Blogger.
2. Dasbor (Dasboard)
3. Template
4. 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 kode yang berwarna merah dengan kode baru dibawah (xHTML Readmore Otomatis)
• Simpan Template (Save Template).
7. Selesai!

Kode HTML Read More Otomatis tanpa Thumbnail

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.post{padding:10px;border:1px solid #eee;border-radius:6px;box-shadow:0 0 6px #aaa;}
</style>
<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:else/>
   <data:post.body/>
</b:if>
<b:else/>
   <data:post.body/>
</b:if>

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit