Membuat Read More Otomatis Tanpa Kode Javascript

Pada posting sebelumnya saya telah membuat artikel tentang bagaimana cara membuat read more pada postingan blog. Membuat read more sederhana pada saat menulis artikel adalah dengan cara mengklik ikon read more yang berbentuk seperti "kertas sobek" setelah pointer mouse ditempatkan pada kalimat yang dikehendaki. 

Dengan cara ini tentunya dilakukan secara manual, sehingga kita harus melakukannya setiap menulis artikel. bagi sebagian blogger hal ini tidak masalah selama dia ingat untuk mengklik ikon read more tersebut. Namun jika kita lupa, tentu saja kita harus mengedit kembali postingan yang telah dipublikasikasikan sebelumnya. Dalam ngeblog tentu saja kita ingin sesuatu yang praktis, ringkas dan otomatis, begitu pula dalam hal membuat artikel agar read more terpasang secara otomatis.

Jika sobat ingin tau bagaimana cara memasang read more otomatis, mari kita sama-sama menyimak tutorial berikut ini.

1. Langkah pertama masuk ke akun blogger.
2. Pastikan sobat sudah membackup template sobat.
3. Buka dasbor blog > Template/edit HTML> centang expland template widget.
4. Cari kode <data:post.body/>

kemudian ganti dengan kode di bawah ini;

<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>

Jika ada lebih dari 1 (satu) kode <data:post.body/> , pilih yang pertama. 


4. Untuk tampilan di blognya silakan masukkan kode css di bawah ini, tepat diatas kode ]]></b:skin>

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

Klik pratinjau dan Simpan template.