Easy Post Summaries or Auto Readmore and Thumbnails for Blogger Blogs - No JavaScript Required! Cara Membuat Ringkasan Posting, alias Auto Readmore, plus Gambar Thumbnail di Homepage Blogger TANPA JAVASCRIPT.
Tahap 1
Cari/temukan kode berikut ini:
Ganti (Replace) dengan kode berikt ini:
Klik "Preview". Anda akan lihat penampakan seperti gambar di bawah ini:
Tahap 2
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:
Sebelum kode tersebut, atau DI ATAS kode tersebut, Copas kode CSS berikut ini:
Maka tampilannya akan berubah seperti 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.