Cara Meringkas Post serta Gambar Thumbnail di Home Blog

Cara Membuat Ringkasan Posting, alias Auto Readmore, plus Gambar Thumbnail di Home Blog TANPA JAVASCRIPT.

Tahap 1
Cari/temukan kode berikut ini:

<data:post.body />

Ganti (Replace) dengan kode berikt 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>

Klik "Preview". Anda akan lihat penampakan seperti gambar di bawah ini:

Tahap 2

Tambahkan kode CSS untu mengatur posisi gambar thumbnail.

Cari kode berikut ini:

</b:skin>

Sebelum kode tersebut, atau DI ATAS kode tersebut, Copas kode CSS berikut ini:

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

Maka tampilannya akan berubah seperti ini:

Kalau mau tampilan gambarnya di kanan, maka gunakan kode yang ini:

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

Save Template! Itulah Cara Membuat Ringkasan Posting alias Auto Readmore plus Gambar Thumbnail di Homepage Blogger.