Cara Membuat Auto Readmore pada BLOG Supaya Loading menjadi Ringan

AiBeiC blog | Cara Membuat Auto Readmore pada BLOG Supaya Loading menjadi Ringan - Selamat berjumpa di blog saya yang sederhana ini.

Untuk blogger pemula yang pertama kali bikin blog baru, biasanya kalian masih menggunakan template bawaan blogspot yang fiturnya masih standar.

Setelah sekian waktu ngeblog, buat kamu yang rajin update artikel sering kali nggak terpikir betapa penuhnya tampilan pada homepage, hingga loading blog terasa lelet saat membuka situs blog kamu karena panjangnya artikel yang harus dimuat pada saat home url di klik.

Kasus yang begini seharusnya kamu membutuhkan fitur auto readmore pada interface home blog agar menyingkat waktu loading saat pengunjung mengklik url beranda blog kamu.

Disamping itu readmore juga bisa lebih membikin rapi tampilan home pada blog.


"Readmore" atau bisa juga "selanjutnya" ataupun "baca selengkapnya" dan lain lain sering kita lihat pada blog atau situs yang menggunakan template pihak ketiga bukan bawaan blogspot.

Kamu tidak usah jauh jauh mencari contohnya karena AiBeiC blog ini pun sejatinya sudah menggunakan auto readmore untuk tampilan pada home page walau tidak dimunculkan tombol "baca lagi"nya.

Sehingga saya bisa katakan, readmore outomatis sangat perlu diterapkan pada blog kamu, karena manfaatnya sungguh dapat kita rasakan sendiri.


Readmore ini terbagi 2, ada yang outomatis tanpa javascript adapula yang menggunakan javascript.

Untuk automatis tanpa javascript, kode script readmore perlu ditanam pada html template.

Kamu perlu sedikit utak-atik/ edit html template, tapi praktis sekali kerja untuk selamanya.


Sedangkan untuk yang menggunakan javascript kita perlu manual menyisipkan script readmore setiap kali posting artikel.

Ribet kan?

Memang masing masing teknik punya kelebihan dan kekurangan masing-masing, namun pertimbangan dari segi praktis saya lebih memilih auto readmore tanpa javascript.


Saat ini kebanyakan para blogger menerapkan auto readmore plus gambar. Memang dari tampilan teknik ini cukup bisa menarik perhatian kita.

Tapi saya baru tau ternyata permasalahan loading blog yang lamban bisa jadi karena kita selama ini menggunakan script auto readmore plus gambar pada blog kita.

Untuk segala permasalahan diatas, nampaknya kita perlu menerapkan Auto Readmore Tanpa Javascript tanpa gambar atau no thumbnail.

image: teknologivirtual.com

Baik, selanjutnya kita ke tutorial bagaimana cara membuatnya


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…


Demikian tutorial Cara Membuat Auto Readmore pada BLOG Supaya Loading menjadi Ringan.

Selamat Mencoba dan Semoga Bermanfaat.