Trik Membuat Read More di Blogspot

Terkadang, postingan kita terlalu panjang jika ditampilkan seluruhnya. Dengan trik "readmore" kita dapat memilih sebagian teks yang akan ditampilkan di halaman depan. Teks yang lengkap akan muncul setelah pembaca mengeklik link readmore. Link tersebut bisa kita ganti sesuai keinginan kita, misalnya kita ubah menjadi baca selengkapnya. Berikut ini trik untuk menampilkan read more yang saya rangkum dari blogger help dan tutorial dari mas isnaini.

Caranya adalah:
1. Klik Layout.
2. Masuk ke edit HTML.
3. Beri tanda centang pada Expand Widget Templates.
4. Masukan kode di bawah ini di antara kode </head> dan } ]]></b:skin>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.classname {display:inline;}
<b:else/>
span.classname {display:none;}
</b:if>
</style>

Langkah no 4 adalah untuk menentukan class dengan nama classname yang akan muncul hanya pada halaman posting (permalinks) bukan di halaman depan. Nama kelas dapat kita ganti sesuai selera kita, misal kita ganti classname menjadi fullpost.

5. Langkah ini bertujuan untuk membuat link yang akan mengarahkan pengunjung ke halaman posting. Tambahkan kode berikut setelah kode <data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>READ MORE!</a>
</b:if>
Link ini hanya muncul di halaman depan atau halaman archive. Kita dapat membuat link sesuai selera kita dengan cara mengganti READ MORE! dengan teks yang kita inginkan, misalnya Baca selengkapnya.

6. Save template
7. Pilih Setting, masuk ke bagian Formatting.
8. Masukkan kode berikut kedalam Post Template.

<span class="classname">

</span>
Classname tersebut tergantung dari nama class yang kita tentukan di langkah 4. Jika pada langkah 4,classname kita ubah menjadi fullpost, maka classname di sini juga harus kita ganti dengan fullpost.

Nah, bagaimana cara kita melakukan posting agar trik readmore ini berjalan?

Berikut ini contoh postingan yang akan kita potong:
Inilah tulisan awal saya.<--kita ingin memotong di sini-->Ini merupakan tulisan lanjutan.

Maka, yang harus kita lakukan adalah menuliskan Inilah tulisan awal saya. di atas kode <span class="classname">, lalu kita tuliskan Ini merupakan tulisan lanjutan. di antara kode <span class="classname"> dan </span>

Contoh penulisan posting:

Inilah tulisan awal saya.
<span class="classname">
Ini merupakan tulisan lanjutan.</span>

Nah, jika pengunjung mengunjungi blog kita, maka postingan kita akan terlihat seperti ini:

Inilah tulisan awal saya.
READMORE!

Jika pengunjung mengeklik link READMORE! , maka pengunjung akan menuju ke halaman posting dan pengunjung pun akan melihat seluruh teks seperti ini

Inilah tulisan awal saya.
Ini merupakan tulisan lanjutan.

Selamat mencoba. Semoga trik ini bermanfaat. Correct Me If I'm Wrong