Membuat Readmore Di Blogger Tanpa Javascript Terbaru

Pada template blogger/blogspot bawaan, halaman index menggunakan kode data:post.body untuk menampilkan teks artikel. Penggunaan snippet ini tentunya akan menampilkan teks artikel secara keseluruhan. Hal tersebut tentunya kurang bagus secara tampilan apalagi jika mengingat bahwa itu halaman index. Bisa-bisa ctr blog anjlok.

Dulu, untuk menyingkat output data:post.body menjadi beberapa baris kalimat saja menggunakan javascript. namun sekarang pihak developer blogger sudah menyediakan snippet untuk menampilkan teks artikel menjadi beberapa baris saja. Berikut ini kodenya:

<data:post.snippet/> menampilkan beberapa baris kalimat
<data:post.longSnippet/> menampilkan kalimat yang lebih panjang

Penggunaan tombol readmore
Tombol readmore di sini bertujuan tidak hanya berperan sebagai shortcut namun untuk mempertegas link yang mengarah ke artikel kita. Penting atau tidaknya tombol shortcut ini tergantung selera saja. Untuk pemasangannya cukup dengan menambahkan kode shortcut berupa tag a tepat di bawah snippet di atas.

Pemasangan
Sebelum melakukan editing pada template blog kalian sebaiknya melakukan backup dulu untuk menghindari hal-hal yang tidak diinginkan. Untuk pengguna template bawaan blogger silahkan buka editor template lalu cari kode <data:post.body/>. Nanti akan ditemukan 2 kode tersebut. Pilih kode yang ke dua.

Ganti kode tersebut dengan kode berikut

<b:if cond='data:view.isSingleItem'>
<div><data:post.snippet/></div></b:if><b:if cond='data:view.isMultipleItems'><div><data:post.snippet/></div> <div class='read-more'><a expr:href='data:post.link' expr:title='data:post.title'>Read More</a></div></b:if>

atau

<b:if cond='data:view.isSingleItem'>
<div><data:post.longSnippet/></div></b:if><b:if cond='data:view.isMultipleItems'><div><data:post.longSnippet/></div> <div class='read-more'><a expr:href='data:post.link' expr:title='data:post.title'>Read More</a></div></b:if>

Berikutnya tambahkan kode berikut tepat di atas kode ]]></b:skin>

.read-more{display:inline-block;margin:5px 0 0}
.read-more a{display:block;padding:5px;background:#333;color:#fff}
.read-more a:hover{background:orange;color:#fff}

Langkah terakhir yaitu simpan template.