Menu

Blogger İçin Yeni CSS3 Yuvarlak Köşeli Butonlar

Sitenize gelen okuyucularınızın dikkatini çekmek için kullana bileceğiniz Blogger İçin Yeni CSS3 Yuvarlak Köşeli Butonlar ile veb tasarımınız oldukça güzel görünecektir

Basit köşeleri yuvarlak CSS butonlarının sitenize eklemek oldukça kolaydır kodları temanızın CSS bölümüne ekleyiniz,HTML kodlarını ise butonların görünmesini istediğiniz yazılarınıza eklemeniz ve Buton Yazısı yazan yerleri isteğinize göre düzenlemeniz yeterli olacaktır.

Blogger İçin Yeni CSS3 Yuvarlak Köşeli Butonlar


Blogger yazılarınızda kullanabileceğiniz çok kullanışlı bu butonlar ile Ön İzle (Demo) ve İndir (Download) linklerinizi oldukça şık bir şekilde site ziyaretçilerinize sunabilirsiniz.

Blogger CSS Button Kodunu Düzenleme

HTML olan kodları ise yazınızın neresine eklemek istiyorsanız sayfanızın kod kısmına geçerek CSS kodlarının altında bulunan HTML kodlarınızı ekleyiniz.Sayfanızın ön izlemesini yaptığınızda bazende makalenizi yayınladıktan sonra butonlar görünecektir.

Blogger paneline giriş yaptıktan sonra Şablon > HTML'yi düzenleden sonra kodlarınızın içinde bulunan ]]> </ b: skin> arayın bulduğunuz bu kodun üstüne aşağıda verdiğim kodu ekleyiniz ve şablonunuzu kaydediniz.

.seomektebi{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.seomektebi a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.seomektebi a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
.seomektebi a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
.seomektebi a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
.seomektebi a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
.seomektebi a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
.seomektebi a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
.seomektebi a:hover, .seomektebi:hover { color: #fff; opacity: .7 }

Blogger İçin Yeni CSS3 Yuvarlak Köşeli Butonlar Nasıl kullanılacak


Bu butonları kullanmak içim HTML bölümüne gelerek aşağıda kullanmak istediğimiz renkteki butonu seçerek HTML bölümüne ekleyiniz,url adresi yazan yere kendi adınızı veya link vermek isteyeceğiniz adresi ekleyiniz.Buton Yazısı olan yere bağlantı adresinizi yazınız.

Red Button
<span class="seomektebi"><a class="red" href="Url Adresi">Buton Yazısı</a></span>
Orange Button
<span class="seomektebi"><a class="orange" href="Url Adresi">Buton Yazısı</a></span>
Green Button
<span class="seomektebi"><a class="green" href="Url Adresi">Buton Yazısı</a></span>
Blue Button
<span class="seomektebi"><a class="blue" href="Url Adresi">Buton Yazısı</a></span>
Gray Button
<span class="seomektebi"><a class="gray" href="Url Adresi">Buton Yazısı</a></span>
Dark Button
<span class="seomektebi"><a class="dark" href="Url Adresi">Buton Yazısı</a></span> 

Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger İçin Yeni CSS3 Yuvarlak Köşeli Butonlar "

Önerilen Yazı
×