Arkadaslar sitenizdeki butonlari cok kolay bir sekilde Facebook butonu haline getirebilirsiniz. Simdi size adim adim anlatarak yardim etmeye calisacagim.
Adim 1: Asagida verdigim stil kodunu herhangi bir kod dosyaniza ekleyiniz. (Ben ne olur ne olmaz diye butonlari kullandigim her sayfanin kodlari arasina ekledim ise yaradi. Kodu bu sekilde kullanmaniz tavsiyemdir.)
Adim 2: Sira geldi butonlari eklemeye.
Buton no. 1 (mavi buton.)
Buton no. 2 (Gri buton.)
Buton no. 3 (Yesil buton.)
Buton kodlarimiz bunlar. Buton kodlarindaki "URL buraya gelecek" yazan yere butonlara basildiginda gidilmesini istediginiz yerin URL'sini yazacaksiniz (" isaretleri kalacak). Ornek Dugme yazan yerlere ise butonun ustunde yazmasini istediginiz yaziyi yazacaksiniz. Umarim yardimci olabilmisimdir :)
Kod yapimi bana ait degildir!
Ornek site: http://darknessorlightness.10tl.net Burada en alta bakin. Suan tamamen calisir durumda denedim.
Caps:
Adim 1: Asagida verdigim stil kodunu herhangi bir kod dosyaniza ekleyiniz. (Ben ne olur ne olmaz diye butonlari kullandigim her sayfanin kodlari arasina ekledim ise yaradi. Kodu bu sekilde kullanmaniz tavsiyemdir.)
Kod:
<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>Adim 2: Sira geldi butonlari eklemeye.
Buton no. 1 (mavi buton.)
Kod:
<a href="URL buraya gelecek"><button onfocus="this.blur();" class="koddostu_face1">
Örnek Düğme
</button></a>Buton no. 2 (Gri buton.)
Kod:
<a href="URL buraya gelecek"><button onfocus="this.blur();" class="koddostu_face2">
Örnek Düğme
</button></a>Buton no. 3 (Yesil buton.)
Kod:
<a href="URL buraya gelecek"><button onfocus="this.blur();" class="koddostu_face3">
Örnek Düğme
</button></a>Buton kodlarimiz bunlar. Buton kodlarindaki "URL buraya gelecek" yazan yere butonlara basildiginda gidilmesini istediginiz yerin URL'sini yazacaksiniz (" isaretleri kalacak). Ornek Dugme yazan yerlere ise butonun ustunde yazmasini istediginiz yaziyi yazacaksiniz. Umarim yardimci olabilmisimdir :)
Kod yapimi bana ait degildir!
Ornek site: http://darknessorlightness.10tl.net Burada en alta bakin. Suan tamamen calisir durumda denedim.
Caps:
