Cara Membuat Ringkasan Posting plus Gambar Thumbnail di Homepage Blogger

Baca Juga

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:

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

Sumber: 

http://www.bloggerbuster.com/2011/03/easy-post-summaries-and-thumbnails-for.html