Cara Membuat Auto Readmore Thumnail

Banyak yang tanya nih, gimana buat Auto Readmore tapi juga auto thumbnail. Pada postingan sebelumnya Black IT memberikan Cara Membuat Daftar Isi Berdasarkan Label. Nah.. kali ini Black IT akan membahas tentang  cara membuat auto readmore, ini khusus blogger blogspot, autoreadmore ini akan menggunkana html dan Css saja, yang pasti akan mengurangin query blog kita saat di load, saat loading menjadi lebih ringan.

Bagi yang sudah pasang auto readmore dengan javascrt silahkan di hapus dulu.

Langkah1
Masuk Dasboard >> Rancangan >> Edit HTML lalu Expand Widget Templates

Langkah2
Cari kode ini : <data:post.body /> 

Langkah3
Hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond=’data:blog.pageType != “item”‘> <b:if cond=’data:post.snippet’> <b:if cond=’data:post.thumbnailUrl’> <div class=’Image thumb’> <img expr:src=’data:post.thumbnailUrl’/> </div> </b:if> <data:post.snippet/> <b:if cond=’data:post.jumpLink != data:post.hasJumpLink’> <div class=’jump-link’> <a expr:href=’data:post.url + “#more”‘ expr:title=’data:post.title’><data:post.jumpText/></a> </div> </b:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if>

Langkah4
Tambahkan style thumbnails images nya dengan Kode CSS dibawah ini:

.thumb img { float: left; margin: 0 10px 10px 0; }

Taruh saja diatas kode : ]]></b:skin>

Langka5
Save template kamu dan lihat hasilnya.
Untuk mengantisiasi terjadinya kesalahan silahkan backup terlebih dahulu template blogger kamu. :)

Artikel terkait :