Auto Read More dengan Thumbnail Gambar Kecil Tanpa Javascript

Cara Membuat Auto Read More Halaman Depan Blogger dengan Thumbnail Gambar Kecil Tanpa Javascript - Fast Loading! Plus Default Image.

TIPS desain template blog berikut ini akan membuat halaman depan blog berupa judul, gambar kecil, dan ringkasan atau kutipan alinea pertama posting blog. Default Image akan muncul jika tulisan tidak disertai ilustrasi gambar atau foto.

Tampilan blog seperti ini dikenal dengan "Auto Readmore" karena biasa menampilkan tautan teks (text link) bertuliskan "Read more" atau "Bara selengkapnya".

Cara Membuat Auto Read More dengan Thumbnail Gambar Kecil Tanpa Javascript ini ditujukan untuk modifikasi template bawaan blogger atau template mana pun yang masih berupa tulisan penuh di halaman depan.


Cara Membuat Auto Read More Thumbnail Kecil plus Default Image

1. Template > Edit HTML
2. Cari (Ctrl+F) kode <data:post.body/>
3. Ganti kode <data:post.body/> yang kedua dengan kode berikut 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrL4HrMNLh25jbJ_7jS1cwG0_0MryQtAPmIXkfjvwf2zFvw1uWeX2bGJX_5ibUtlSVA8UObLtCKZq_ckU5pr9dB0k_Lzn-tUhlDS_vFRqWl3qGZK3coI73dfIpHEJ1h9r2oRveaJN8yeM/s1600/img_not_available.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>

4. Copas kode berikut ini di atas kode  ]]></b:skin>

 .post-image {float: left; margin-right: 12px}

5. Save Template!

EXTRA:
Jika ingin autoreadmore tanpa default thumbnail, artinya jika posting tidak ada gambar, maka tidak ada default image yang muncul, maka gunakan kode berikut ini untuk langkah no. 3

<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>

Demikian  cara membuat Auto Read More dengan Thumbnail Gambar Kecil Tanpa Javascript di templata bawaan blogger atau di tampilan posting halaman depan blog yang masih Full Article.*

Sumber