Cara Membuat Readmore Unik Tanpa Javascript

By HP Yitno

Selama tiga tahun lebih aku termasuk orang yang anti dengan readmore otomatis. Apalagi yang menggunakan javascript. Tampilannya memang bagus dan elegan namun membuat loading blog menjadi lamban. Saya tak ingin pengunjung blog pergi duluan gara-gara postingan nggak terbuka secara keseluruhan.

Namun belakangan saya merasa perlu memasang readmore otomatis mengingat artikel saya jumlahnya sudah puluhan lebih. Karena saya ingin menampilkan tulisan yang begitu banyak pada halaman muka, sebagai konsekuensinya aku harus membuang beberapa widget pilihan agar loading situs tidak bertambah berat.

Saya sendiri berani memasang readmore ini karena tidak menggunakan javascript. Seandainya saja  tutorial yang ada di internet mewajibkan penggunaan javascript, maka saya lebih memilih menggunakan fitur jumpbreak daripada harus mengorbankan kecepatan loading blog.

Namanya seorang blogger, suatu saat pasti akan menemukan kebosanan dan titik jenuh. Tampilan template yang sudah dimodifikasi dengan readmore ingin dikembalikan ke posisi semula tanpa readmore. Nah, agar saya tidak lupa cara mengembalikan ke template dasar, maka saya buatlah tutorial cara memasang readmore otomatis ini. Jadi kalau kita mau mengembalikan ke versi default, kita tinggal mengikuti tutorial dengan urutan kebalikannya.

Berikut cara memasang readmore otomatis tanpa javascript yang simple dan mudah:
1. Login ke akun blogger sobat
2. Klik menu template kemudian klik edit html
3. Cari kode ]]></b:skin>
4. Untuk mempercepat pencarian, silahkan gunakan tombol kombinasi CTRL + F
5. Jika sudah ketemu kode skin diatas, masukkan kode dibawah ini tepat diatasnya.

.post-thumbnail{float:left;margin-right:20px}

6. Setelah itu cari kode <data:post.body/>
7. Anda akan menemukan tiga kode data:post.body yang sama. Pilihlah kode yang kedua.
8. Jika sudah ketemu, hapus kode tersebut dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

9. Jika sudah, simpan template dan lihatlah hasilnya.

Demikianlah artikel sederhana tentang cara memasang readmore otomatis yang unik dan beda tanpa javascript. Jangan khawatir dengan loading blog atau seo anda. Kode css ini sebenarnya milik related post versi mobile namun dimanfaatkan untuk pemasangan readmore otomatis.

SHARE :