Thursday, June 9, 2011

Auto Read More Dengan Thumbnail Baru(Tanpa Javascript)

Halo sobat,

Membuat blog dengan Auto Read More pastinya lebih asyik dibandingkan dengan mengklik jumplink setiap kali memasukan post. Tutorial yang saya buat mungkin berbeda dengan yang diberikan para master lain. Karena kebanyakan para master menggunakan javascript.
Lho! emangnya kenapa kalau pakai javascript? Ada beberapa kelemahan.

1. Memperberat Loading Blog.
2. Jika browser tidak mendukung javascript, posting akan berantakan jika di akses.

Untuk menangani masalah itu, saya akhirnya menemukan cara untuk membuat Auto Read More Tanpa Javascript. Ikuti ya caranya:

1. Login Ke Blogger.com.
2. Klik Rancangan>> Edit HTML>> Expand Template Widget.
3. Cari kode seperti dibawah ini:
<data:post.body />
4. Ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<br/>
<data:post.body/>
<b:else/><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></b:if>
5. Simpan Template.

Biar bagus tampilannya, tambahin deh kode CSS seperti di bawah ini:
.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}
Taruh sebelum kode:

</b:skin>
Source: http://www.bloggerbuster.com(Jika anda melihat di sumber asli pada halaman static anda juga akan ada readmore. Kode diatas sudah saya modifikasi dari sumber aslinya. sehingga tidak akan ada readmore pada halaman statis anda)
Selesai deh, semoga bisa menambah gaya blogspotmu, Tinggalin komentar donk kalau tutorial ini berguna.

No comments:

Post a Comment