Search This Blog

Membuat Auto Readmore Tanpa JavaScript

  • Sunday, June 17, 2018 at 12:39:00 PM
  • 0 Comments
  • Views
Satu lagi trik yang aku dapatkan untuk mempercatik tampilan blog ini yaitu fitur Auto Readmore tanpa JavaScript. Trik ini aku dapatkan dari blognya Blog Rometea.

Pemasangan
Cari kode di bawah ini. Biasanya terdapat dua kode tersebut di dalam template, pilih kode yang kedua.
<data:post.body/>
Ganti dengan kode di bawah ini.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Untuk menghilangkan thumbnail image dan jump break link nya hilangkan kode berikut ini.
<b:if cond='data:post.thumbnailUrl'>
<img class='post-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
Dan
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
Nanti tampilannya akan seperti gambar di bawah ini.
Auto readmore tanpa thumbnail dan jump break
Atau kalau ingin menggunakan thumbnail gambar bisa dengan kode di bawah ini.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-image' alt='no image' src='http://1.bp.blogspot.com/-RqKvZTT_gGY/VVjvSQxK85I/AAAAAAAAAuM/iTdZ8KYSgiU/s1600/images9.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Simpan template.

Referensi
No comments
No comments

Post a Comment