Customize Your Blog : Menggunakan Read More pada Blog

Read more >> merupakan link (tautan) ke halaman posting yang lebih lengkap. Suatu tulisan dapat terdiri dari beberapa paragraf. Paragraf yang banyak dalam tulisan tentu akan memperpanjang hasil penulisan. Bayangkan jika satu halaman blog kamu ada 7 (tujuh) judul yang ditampilkan dan semuanya merupakan tulisan yang panjang, sudah barang tentu tampilan blog  terlihat tidak cantik atau menarik secara estetika dan pembaca pun akan letih melakukan scroll untuk menemukan judul artikel yang lain. Nah ada cara untuk mempersingkat tulisan dan dalam tutorial ini juga diulas bagaimana cara menempatkan Read more>> ke kanan dan menambahkan gambar sebagai background dari Read more>>.
New Template Blogger (template blogger yang baru) telah menyediakan widget yang dapat langsung kamu gunakan untuk mempersingkat tampilan artikel yang panjang. Meskipun tampilan artikel singkat tapi pembaca masih tetap bisa membaca keseluruhan artikel dengan meng-klik link Read more>>. Di menu Posting, New Post terdapat beberapa icon menu yang tersedia pada bagian atas yaitu dari undo, redo, function, Bold, Italic dll. Menu Read more>> juga tersedia di situ yaitu berupa kertas yang robek pada bagian tengahnya. seperti yang terlihat pada gambar.

Icon Read more>> dilingkari dengan lingkaran merah dengan inset "Insert jump break" pada gambar di samping. Untuk menggunakan icon tersebut pastikan posisi kursor berada pada posisi antara dua paragraf. Paragraf di atas kursor merupakan batas paragraf yang akan ditampilkan sementara paragraf yang berada di bawah hingga paragraf akhir merupakan paragraf yang tidak akan ditampilkan. Paragraf yang tidak tampil tersebut akan tampil saat link Read more>> diklik.

Icon "insert jump break" saat di-klik akan menghasilkan sebuah garis pembatas antara dua paragraf dalam artikel yang kamu tulis. Contohnya adalah seperti berikut :

Pada gambar di atas garis solid dan garis putus-putus merupakan hasil dari icon "insert jump break" yang tadi di-klik. Setelah artikel di-publish (diterbitkan) maka dua garis tersebut akan berubah menjadi link dengan title Read more>>. Secara default posisi link Read more>> tersebut terletak pada bagian kiri posting. Jika ingin memindahkan posisinya pada bagian kanan maka perlu penambahan kode css pada template blog kamu.

Kode untuk menampilkan link Read more>> adalah sebagai berikut :

<b:if cond="data:post.hasJumpLink">
<div class="jump-link">
<a expr:href="data:post.url + &quot;#more&quot;" expr:title="data:post.title" href="http://www.blogger.com/post-edit.g?blogID=3407276920416895119&amp;postID=1804864959080323252"><data:post.jumptext/></a>
      </div>
</b:if>

Copy code berikut, dan paste pada bagian css template blogger. Bagian CSS pada template merupakan bagian yang berada antara <b:skin><![CDATA[/ dan ]]></b:skin>. Untuk meng-copy kode program di bawah klik dahulu "view plain", lalu copy isi kode pada jendela pop-up yang muncul.

.jump-link a {
 float:right; 
} 

Save kode html template blog dan lihat hasilnya. Kamu akan mendapati bahwa link Read more>> akan berada pada sebelah kanan bawah posting artikel. Nah satu langkah untuk menggunakan Read more>> dan memindahkannya pada bagian kanan sudah dilakukan.

Lalu bagaimana cara mengganti tulisan Read more >> dengan sebuah gambar animasi yang menarik ??

Kita akan menggunakan gambar button di atas sebagai pengganti tulisan Read more>> untuk mempercantik tampilan blog. Cari kode berikut :

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

Lalu ganti kode di atas dengan kode berikut :