Cara Membuat Ringkasan Posting plus Gambar Thumbnail di Homepage Blogger

Posted by New Johny Wuss

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

» Thanks for reading: Cara Membuat Ringkasan Posting plus Gambar Thumbnail di Homepage Blogger
Previous
« Prev Post
CB Blogger
New Johny WussUpdated: July 03, 2014

5 comments:

  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

Follow & Get Update by Email

CB