Facebook Tarzı Düğme Butonları

Sitenize Facebook'daki gibi butonlar eklemek istermisiniz ?

Mete kardeş tarafından sizler için hazırlanmış bu harika buton kodlarına bayılacaksınız.. Facebook sitilinde 3 farklı buton içerin bu özel kodu sadece 2 adımda Blogger'unuza uygulayın.. Tek yapmanız gereken 1. Adım olan Stil kodunuz ekleyip beğendiğiniz buton kodunuda hemen altına eklemek hepsi bu kadar basit..

1. Adım Stil Kodunu Sitenize Ekleyin

<style>
.koddostu_face1{cursor:pointer;background-color:#5B74A8;padding:2px 16px 3px 16px;font-family: "Lucida Grande", tahoma,verdana,arial,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: normal;
line-height: 16px;color:#ffffff;
border:none;
outline: 1px solid #29447e;
border-top:1px solid #8a9cc2;
}
/*
Kod Dostu facebook tarzı düğmeler
*/
.koddostu_face1:active{cursor:pointer;background-color:#4f6AA3 !important;border-top:1px solid #4f6AA3 !important;}
.koddostu_face1:hover{cursor:pointer;}
.koddostu_face2{cursor:pointer;padding:2px 16px 3px 16px;font-family: "Lucida Grande", tahoma,verdana,arial,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: normal;
line-height: 16px;color:#333333;
border:none;
outline: 1px solid #999999;
border-top:1px solid #ffffff;
background:#f2f2f2 url('http://s-static.ak.fbcdn.net/rsrc.php/v2/yM/r/QvWFehnkoZF.png') no-repeat scroll -352px -201px;}
.koddostu_face2:active{cursor:pointer;border-top:1px solid #dddddd !important;background:#dddddd !important;background-image:none !important;}
/* http://siteneeklekodlari.blogspot.com/2012/08/facebook-tarz-dugme-kodlar-sadece-burada.html */
.koddostu_face2:hover{cursor:pointer;}
.koddostu_face3{cursor:pointer;padding:2px 16px 3px 16px;font-family: "Lucida Grande", tahoma,verdana,arial,sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: normal;
line-height: 16px;color:#ffffff;
border:none;
outline: 1px solid #3b6e22;
border-top:1px solid #98c286;
background-color:#6ea954;}
.koddostu_face3:active{cursor:pointer;border-top:1px solid #609946 !important;background:#609946 !important;background-image:none !important;}
.koddostu_face3:hover{cursor:pointer;}
</style>

<a href="http://bloggereklentileri.blogspot.com"><button onfocus="this.blur();" class="koddostu_face1">

Örnek Düğme

</button></a>

<a href="http://bloggereklentileri.blogspot.com"><button onfocus="this.blur();" class="koddostu_face2">

Örnek Düğme

</button></a>

<a href="http://bloggereklentileri.blogspot.com"><button onfocus="this.blur();" class="koddostu_face3">

Örnek Düğme

</button></a>