Membuat Tombol Read More

Kamu pasti sudah tidak asing lagi dengan format 'Read More' dalam postingan. Y, keseluruhan postingan akan muncul, bila diklik tulisan 'Read More' atau 'Selengkapnya', dsb. Cara membuat yang seperti itu juga pernah dibahas disini.

Sebelum membaca lebih lanjut, coba lihat dulu bagian bawah postingan ini. Ada tombol 'Read More' nya kan? Jika tombol itu diklik, maka akan muncul seluruh postingan. Lo, kan biasanya cuma tulisa 'Read More' atau 'Selengkapnya' j yang diklik? kok bisa diganti dengan tombol seperti itu?

He9. Keren khan? Klo kamu pake ni juga, dijamin blog mu akan semakin 'gw bangetzzz'.:D:D:D

Mw bikin yang ky gini? gmn caranya? Lagi2, gampang kok!!

Yang jelas, blog mu sudah menggunakan format 'Read More'. Jika belum, cara membuatnya bisa kamu lihat disini.

Untk mengubahnya menjadi Button atau Image, yang jelas kamu harus punya gambar dulu, dan yang pasti ada kode html nya. Klo belum punya, silahkan upload gambar kmu di photobucket.com, atau kmu bisa membuatnya di cooltext.com.

Nah, akan saya contohkan bagaimana memasang button berikut menggantikan tulisan 'Read More'




Kode gambar ini :
<img src="http://i425.photobucket.com/albums/pp335/egobslank/th_RM4.jpg">

Setelah mempunyai kodenya, kita mulai mengedit kode HTML nya. Silahkan menuju 'Tata Letak' - 'Edit HTML'.

Sebelum melakukan apapun, DOWNLOAD dulu template kmu.

Beri tanda centang pada 'Expand Template Widget'

Cari kode berikut :

<expr:href="data:post.url">Selengkapnya</a>
</b:if>

Silahkan ganti kode berwarnya merah dengan kode Image kmu. Dengan contoh yang sudah ada, kode akan menjadi seperti ini:

<expr:href="data:post.url"><img height='25' src='http://i425.photobucket.com/albums/pp335/egobslank/RM4.jpg ' width='135'/></a>
</b:if>

Kode warna merah adalah kode image, dan kode warna hijau adalah kode tambahan untuk mengatur panjang dan lebar gambar, agar tidak terlalu besar/kecil. Bisa diubah sesuai selera.

Klo dah, simpan template kmu, dan lihat hasilnya. Keren kan? dan, lagi2, gampang kok!!

Klo kamu males upload/bikin gambar, coba pake yang ini..tinggal copy paste j kodenya...



<img src="http://i425.photobucket.com/albums/pp335/egobslank/th_RM1.jpg" width='135' height='25'/></a>



<img src="http://i425.photobucket.com/albums/pp335/egobslank/th_RM2.jpg" width='135' height='25'/></a>



<img src="http://i425.photobucket.com/albums/pp335/egobslank/th_RM3.jpg" width='135' height='25'/></a>



<img src="http://i425.photobucket.com/albums/pp335/egobslank/th_RM5.jpg" width='135' height='25'/></a>



<img src="http://i425.photobucket.com/albums/pp335/egobslank/th_RM6.jpg" width='135' height='25'/></a>



<img src="http://i425.photobucket.com/albums/pp335/egobslank/th_RM7.jpg" width='135' height='25'/></a>

Selamat berkarya !!