Cara Membuat Tombol Keren [Cool Button] untuk Blogger

Membuat salah satu tombol atau button pada blog adalah sebuah hal yang tidak jarang sahabat bloggers lakukan. Hal ini disebabkan oleh karena adanya beberapa kebutuhan para blogger untuk membuat sebuah postingan pada blog agar terlihat menarik dengan menggunakan sebuah tombol, baik itu tombol yang berisikan link seperti link download, live demo, next, home, previous atau yang lainnya.

Nah, pada kesempatan kali ini, saya akan memberikan sebuah tips kepada sobat tentang bagaimana cara membuat tombol keren atau dalam bahasa inggrisnya cool button yang sudah dimodifikasi sedemikian rupa sehingga hasil yang ditampilkan berbeda dari tombol-tombol yang lain. Berikut contoh gambar dan live demonya.

LIVE DEMO

Bagaimana, sobat tertarik? Jika sobat tertarik, perhatikan cara pemasangan dan penggunaan tombol ini pada postingan blog.

• Langkah pertama, login ke Blogger


• Pilih Template » Edit HTML » Proceed


• Copy kode CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>

.ls-button{

background-color:#0404B4;

font-family: 'Verdana', sans-serif;

font-size:12px;

text-decoration:none;

color:#fff;

position:relative;

padding:10px 20px;

padding-right:50px;

background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);

border-radius: 5px;

box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;

}

.ls-button:active {

top:3px;

background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);

box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;

}

.ls-button:before {

background-color:#FF0000;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8QAvPGVo0Dkhya-3V07p9rJkY7va_bjcFIZDmQTKQSOD3BjTFanSadCzQcqWQ1kiwxfQIt9-bWch6NIK_T6dKYtFh31NgXMWwXdYcEKJLXZsEN52rjvfEbl6e39knLpJ9d4bS8D-trt1/s1600/lostsector-right-arrow.png);

background-repeat:no-repeat;

background-position:center center;

content:"";

width:20px;

height:20px;

position:absolute;

right:15px;

top:50%;

margin-top:-9px;

border-radius: 50%;

box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;

}

.ls-button:active::before {

top:50%;

margin-top:-12px;

box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;

}

• Simpan template

Nah, sekarang untuk memasangnya pada setiap postingan blog, masukkan kode berikut ke dalam HTML postingan.

<a class="ls-button" href="LINK SOBAT DISINI">MASUKKAN TEXT DISINI</a>

Keterangan : Warna Biru, ganti dengan link download, live demo dan lain sebagainya dan Warna Merah, ganti dengan kata-kata sobat. 

Pilih Publikasikan atau Pratinjau untu melihat hasilnya.



Selamat mencoba... Happy nice blogging and Happy New Year 2013...!!!