Cara Membuat Ringkasan Posting plus Gambar Thumbnail di Homepage Blogger

CB Blogger | July 04, 2014

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

Previous
« Prev Post

Related Posts

5 komentar on Cara Membuat Ringkasan Posting plus Gambar Thumbnail di Homepage Blogger

  1. kodenya tidak bisa di copy gan tolong petunjuknya

    ReplyDelete
  2. Ini blog demo sebenarnya lho.... tapi banyak pengunjungnya juga ternyata.... BUKTI bahwa template ini SEO banget!!!!

    ReplyDelete
  3. Cara nambah summary teksnya gimana ya Bang? Biar teks yang tampilnya lebih banyak :D makasih Bang

    ReplyDelete
  4. Kalo tanpa gambar gimana bang???

    ReplyDelete

 
Copyright © 2020. New Johny Wuss - All Rights Reserved
Template by CB Blogger & Maskolis