Didalam post editor Blogger ada sebuah fasilitas untuk membuat semacam link Readmore yang apabila kita pakai otomatis akan meng-generate link Readmore pada postingan di blog kita. Kita bisa menggunakan fasilitas tersebut dengan menggunakan tag <!--more--> atau cukup meng-klik icon Insert jump break 
dalam post editor, namun fasilitas bawaan tersebut bisa dibilang sangat standar dan kurang menarik. Tapi tak perlu kuatir karena kita bisa memodifikasinya sesuka kita.Pertama login dulu ke akun Blogger kita masing2, lalu masuk ke menu Design, lanjut ke menu Edit HTML, lalu backup dulu template yang teman2 pakai lewat pilihan Download Full Template di halaman tersebut untuk jaga2 apabila terjadi kesalahan karena kalau sampai terjadi kesalahan template yang kita pakai bakal kacau.
Kalau template sudah ter-backup langkah selanjutnya klik [centang/tandai] checkbox :
Lalu cari tag :
<b:if cond="data:post.hasJumpLink">
<div class="jump-link">
<a expr:href="data:post.url "#more"" href="">Read More </a>
</div>
</b:if>
<div class="jump-link">
<a expr:href="data:post.url "#more"" href="">Read More </a>
</div>
</b:if>
atau :
<b:if cond="data:post.hasJumpLink">
<div class="jump-link">
<a expr:href="data:post.url "#more"" href=""><data:post.jumptext></data:post.jumptext></a>
</div>
</b:if>
<div class="jump-link">
<a expr:href="data:post.url "#more"" href=""><data:post.jumptext></data:post.jumptext></a>
</div>
</b:if>
Untuk mudahnya cari dengan fasilitas Find yang memang sudah ada di tiap browser melalui shortcut [Ctrl+F]. Kalau sudah ketemu sekarang saatnya memodifikasi, langkahnya cukup sederhana. Bagian yang akan kita modifikasi adalah baris kode berwarna merah.
Apabila kita cuma ingin mengganti kalimat "Read More" dengan kalimat lain cukup ganti baris berwarna merah dengan kalimat yang kita inginkan misalnya "Continue Reading" atau "Selengkapnya" atau "Menuju TKP".
Namun apabila kita ingin menggunakan gambar untuk readmore-button cukup ganti baris berwarna merah dengan tag berikut :
<img src="url_gambar" border="0">
Semisal :
<img src="http://riadyawan.blogspot.com/my-readmore-button.png" border="0">
Setelah itu klik Save Template dan lihat hasilnya.
Berikut ada beberapa contoh read-more button yang baru saja kubuat menggunakan Photoshop, mungkin bisa teman2 gunakan di blog kalian.
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
Kode tersebut untuk meletakkan readmore button dibagian kanan, kalau ingin menggantinya tinggal ubah nilai atribut <div align="right"> menjadi <div align="center"> untuk posisi readmore button ditengah atau <div align="left"> untuk posisi readmore button disebelah kiri.
Semoga posting kali ini bermanfaat buat temen2.
Sumber : http://www.gorontalo83.co.cc/2012/05/memodifikasi-fitur-read-more-di-blogger.html
0 komentar:
Posting Komentar