Membuat Read More Otomatis Tanpa Kode Javascript

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 Anda  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 Anda sudah membackup template. Untuk berjaga-jaga
3.    Buka dasbor blog > Template/edit HTML > Cari kode <data:post.body/>

Kemudian ganti dengan kode di bawah ini;

<b:if cond='data:blog.pageType != "item"'><br />
<b:if cond='data:post.snippet'><br />
<b:if cond='data:post.thumbnailUrl'><br />
<div class='Image thumb'>
    <img expr:src='data:post.thumbnailUrl'/><br />
</div>
</b:if><br />
<br />
<data:post.snippet/><br />
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'><br />
<div class='jump-link'>
    <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a><br />
</div>
</b:if><br />
<br />
<b:else/><br />
<data:post.body/><br />
</b:if><br />
<b:else/><br />
<data:post.body/><br />
</b:if>

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

5. 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. Selesai dan auto read more blog pun sudah jadi, mudah-mudahan tutorial singkat ini bisa membantu.