Cara Membuat Tombol Efek Unik 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 terlihat menarik dengan menggunakan sebuah tombol, baik itu tombol download, live demo, next, home, previous atau yang lainnya.

LIVE DEMO

Cara Pemasangan !

• 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/AVvXsEimTILVwo5AP14253R8P_yShtY10p4XGU_zjBc4p0JeF9fDO656C4h22zQ-5rCB-Wv7y9txaFCpG6lzcO7OS8C9nrETRlRRwl0CO-upLfaHFmlkW_UaMWEWnIb8zzd42fEonDQv9VSUevyt/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

Cara Penggunaan !

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

<a class="ls-button" href="Masukkan link disini">Teks anda disini</a>

Pilih Publikasikan atau Pratinjau untuk melihat hasilnya.