Cara Membuat Auto Read More + Tumb-Image Tanpa JavaScript

Auto Read More + Tumb-Image Tanpa JavaScript ini biasanya dapat kita temui pada template blog yang sudah di modifikasi seperti yang ada pada btemplates.com. Sebenernya caranya sangat mudah.

Langsung saja
1. Seperti biasa, login ke blog dulu
2. Pilih Rancangan - Edit HTML - centang Expand Widget Template
3. Cari kode <data:post.body /> kemudian 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>

4. Eitsss, jangan keburu di save. Mending di preview dulu aja.
5. Tempatkan kode CSS berikut, tepat diatas ]]></b:skin> untuk menyempurnakan tampilannya.

Jika ingin tampilan gambarnya disebelah kiri, gunakan CSS ini

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

Jika ingin tampilan gambarnya disebelah kanan, gunakan CSS ini

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

6. Baru kemudian simpan template