Auto Read More Dengan Thumbnail Baru(Tanpa Javascript)

<div style='background-color: none transparent;'></div>
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.

8 komentar:

Membuat Buku Tamu Slide Effect Jquery mengatakan...

memang sih pakai readmore dari Jump break bawaan blogger agak repot..
tapi kali ini sudah banyak readmore yang otomatis..

stiker segel mengatakan...

Good posting, ringkas... next time dicoba.

Thanks

yoosyoes mengatakan...

Tadinya mau buat sendiri kodenya, ternyata udah ada yg share.

Auto readmore ini sebenernya fitur bawaan dari template mobile blogger trus diterapin di desktop...

Kode float left nya bisa dipasang di image langsung, ganti kode
<img expr:src='data:post.thumbnailUrl'/>
dengan
<img expr:src='data:post.thumbnailUrl' style='float:left; margin:0 10px 10px 0;'/>

BTW nice post...

id-blognetwork mengatakan...

Wah mantap mas udah saya terapkan langsung di blog saya

Salam,

Cek Info mengatakan...

wow keren

didic mengatakan...

coba ahh

ildaf94 mengatakan...

Coba dulu...

أسامة بويردن mengatakan...

hi friend plz tell me how i can increase width and height of image thumbnail widthout low of img qualité plz tell me here
alwanarabe@gmail.com
and thank youuuu :D

Posting Komentar

Kirimkan komentar yang berbobot untuk membangun kredibilitas anda, Komentar dengan link sampah/spam akan saya hapus.