Cara Membuat Auto Readmore dengan Gambar Tanpa Javascript di Blogspot

Membuat Auto Readmore pada blogspot menjadi bahan pembicaraan kemarin saat ngumpul dengan beberapa pengguna blogspot. Mereka mengeluhkan kecepatan laoding blogspot mereka yang setelah diberi script untuk auto readmore plus gambar ternyata malah menambah beban loading blog. Bahkan setelah di cek di google speed rata-rata turun 5 point, ya karena yang mereka gunakan adalah script Auto Readmore menggunakan Java script. Nah bagaimana mengatasi kecepatan loading yang menurun akibat menggunakan Auto Readmore dengan Gambar ala javascript ? tentu jawabannya mengganti dengan Script Auto Readmore Tanpa Javascript.

Bagaimana Cara Membuat Auto Readmore Dengan Gambar Tanpa Javascript

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.

Dan untuk tampilan CSS pada thumnail, tambahkan kode dibawah ini sebelum </b:skin>

.thumb img {
   float: left;
   margin: 0 10px 10px 0;
}

Simpan dan lihat hasilnya...
Selamat Mencoba dan Semoga Bermanfaat..