Fasilitas 'Read More' dari Blogger

Sabtu, September 12, 2009

Seperti yang sudah diberitakan, dan ditulis oleh beberapa blogger, sekarang blogger sudah mengaktifkan 'selective post summaries' atau ringkasan singkat pada posting blog. Maksudnya dari semua posting kita, akan diperlihatkan beberapa kalimat sebagai ringkasan dari artikel yang kita tulis, ya sama lah dengan fungsi 'read more' seperti yang sudah kita tahu bersama. Fasilitas baru ini disebut sebagai 'jump break'.

Masalahnya adalah fasilitas tersebut diperuntukan bagi pengguna template yang disediakan oleh blogger, sehingga anda yang menggunakan custom template atau template yang tidak disediakan oleh blogger, harus menambahkan beberapa kode agar fungsi ini berjalan

Biasanya kita memasang kode hack seperti <span class="readmore"> atau kode auto read more yang lain. Untuk menggunakan fasilitas jump break ini anda harus menghapus kode-kode read more yang ada di template anda, biasanya berada diantara <script > dan </script >.

Yuk langsung dicoba saja.

Mungkin anda perlu menguji coba dahulu fasilitas ini dengan membuat sebuah posting. Nantinya bisa anda hapus kembali jika anda tidak menginginkannya. Buatlah sebuah postingan dengan new editor, atau dengan mengaktifkan new post editor dengan cara masuk ke setting>basic dan pilih new post editor.

Setelah anda menuliskan semua artikel anda, tambahkan kode <!-- more --> dibawah paragraf yang ingin anda tampilkan. Lalu klik publish.

Jika jump link berhasil, maka akan terlihat paragraf pertama dari artikel anda. Artinya fasilitas ini kompatibel dengan template blog anda. Jika gagal maka anda harus melakukan beberapa langkah berikut ini.

Masuk ke dashboard lalu tuju Layout>Edit HTML dan check kotak 'expand widget template'. Lalu cari kode ini :

<data:post.body/&gt

Jika anda telah memasang kode hack untuk read more, anda akan menamukan lebig dari satu kode <data:post.body/&gt ini, tenang saja, yang perlu anda lakukan adalah melakukan edit kode html yang mempunyai kode

<b:if cond='data.blog.url != data:blog.homepageUrl>

Langsung saja temukan kode <data:post.body/&gt dan letakan kode berikut tepat dibawahnya.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/'></a>
</div>
</b:if >

Klik save lalu lihat postingan baru anda (yang untuk uji coba). Jika postingan anda terpotong, maka fasilitas ini sudah berhasil terpasang. Jika belum maka anda perlu meng-cut kode jump link tadi dan letakan dibawah kode <data:post.body/&gt yang lain. Demikian seterusnya.

Nah sekarang saatnya anda mengkustomisasi tampilan yang ada. Caranya masuk ke Layout>Page Element dan klik edit pada elemen posting.

Pada jendela pop up anda bisa mengganti kata 'read more' dengan kata-kata yang anda mau, misalnya 'baca seterusnya' atau dengan kata yang lain. Carilah kodenya dibawah <div>. Disini kita juga bisa menambahkan kode CSS untuk mempercantik tampilannya dibawah kode <b:skin>. Misalnya kode dibawah ini.

.jump-link a:hover {
background: #000000;
padding: 3px;
color: #ccc;
}.

Selamat mencoba.
Sumber : bloggerbuster