Membuat Tombol Read More Lebih Berwarna

Membuat Tombol Read More Lebih Berwarna ini dimaksudkan untuk memperindah tampilan blog, yang mana Readmore/Baca Selanjutnya berfungsi untuk menampilkan postingan seutuhnya. Tombol Read More yang akan saya share kali ini tidak memakai image/gambar melainkan berupa kode CSS, sehingga tidak memberatkan blog sobat.

Untuk contohnya seperti ini Readmore..

Caranya :

• Masuk ke blogger
• Pilih Template kemudian pilih Edit HTML
• Centang Expand Template Widget
• Dengan menggunakan Ctrl + F cari kode ]]></b:skin>
• Letakkan kode CSS berikut ini diatasnya

/* tombol_readmore */ .tombol_readmore { -moz-box-shadow:inset 0px 1px 0px 0px #FDD017; -webkit-box-shadow:inset 0px 1px 0px 0px #FDD017; box-shadow:inset 0px 1px 0px 0px #FDD017; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FDD017), color-stop(1,#FF0000) ); background:-moz-linear-gradient( center top, #FDD017 5%, #FF0000 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDD017', endColorstr='#FF0000'); background-color:#FDD017; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #E41B17; display:inline-block; color:#ffffff; font-family:arial; font-size:13px; font-weight:bold; padding:7px 7px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; } .tombol_readmore:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FF0000), color-stop(1, #FDD017) ); background:-moz-linear-gradient( center top, #FF0000 5%, #FDD017 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#FDD017'); background-color: #FF0000; } .tombol_readmore:active { position:relative; top:1px; }

• Kemudian untuk pemanggilan HTML nya cari kode 

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'

• Masukan kode ini class="tombol_readmore" ditengah a dan expr:href
• Sehingga menjadi seperti ini

<div class='jump-link'>
<a class="tombol_readmore" expr:href='data:post.url + &quot;#more&quot;'

• Simpan Template

 Untuk diketahui bukan hanya Readmore saja yang dapat dibuat tombol seperti ini, dapat juga dibuat untuk link-link yang lain cukup dengan menambahkan kode pemanggilannya saja yaitu class="tombol_readmore" ditengah kode a dan href.

Silahkan kembangkan pewarnaan yang menurut sobat suka.

Selamat Mencoba.