728x90 AdSpace

Tutorial Flash dan PHP lengkap

Latest News

Saturday, November 10, 2012

cara membuat tombol dengan warna gradient pada blog

sore sore gini di cuaca yg aga mendung saya sempet sempetin beli pulsa modem axis yg 25000rbu cuma buat ngeblog lagi nih sob, soalnya udah lama tuh pulsa modem kaga di isi isi :D kebetulan ada temen yg nanya bagai mana cara membuat class tombol biar tipe warnannya menjadi gradient caranya sih lumayan mudah sob, mudah mudahan totor ini juga bisa bermanfaat buat sobat semua ;)
langsung aja nih kita ketahap tahapnya untuk cara membuat tombol dengan warna gradient pada blog


1. yg pertama sobat buka terlebih dahulu edit html kemudian jangan lupa centang expand  template widged

 

2. kemudian cari kode ]]></b:skin> caranya tekan Ctrl - F

3. setelah itu lalu copast code berikut ini tepat di atas kode ]]></b:skin>


.tw, .fb,
.tw:hover, .fb:hover
{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.tw, .tw:focus
{
background-color: #333333;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}


.tw:hover
{
background-color: #666666;
}



.tw:before
{
content: "";
background: #000000;
background: rgba(0,0,0,.1);
color: #fff;
font-family: verdana;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}


selesai sudah
anda bisa mengubah code yg berwarna  biru dengan warna sesuka anda, untuk warna pada tombol
dan anda juga bisa mengubah code yg berwarna merah sesuka anda, untuk warna pada tombol ketika mouse berada di atas tombol

dan cara pemanggilannya tinggal sisipkan kode yg berwarna pink tersebut
<a class="tw" href="http://www.blogmuhamadridwan.blogspot.com/">Beranda</a>

contoh hasil

saya ucapkan trimakasih :) selamat mencoba :)
bila ada pertannyaan atau hal yg anda kurang di pahami silahkan tinggalkan komentar :)
cara membuat tombol dengan warna gradient pada blog
  • Title : cara membuat tombol dengan warna gradient pada blog
  • Posted by :
  • Date : 2:25 AM
  • Labels :
  • Blogger Comments
  • Facebook Comments

0 comments:

Post a Comment

Top