Ağustos 24, 2012

Blogger İçin Düzenlenmiş CSS3 Renkli Butonlar



Blogger için düzenlenmiş renkli buton seti (pembe, yeşil, mavi, kırmızı, turuncu ve sarı) 6 farklı renkte buton içerir ve 2 boyut (büyük ve orta ölçekli) şeklindedir. Blogunuza içine 2 adımda bu düğmeleri ekleyebilirsiniz. Blogger Için 

Bu Düğmeleri Nasıl Eklerim ? Öncelikle CSS kodu ekleyin ve sonra HTML bölüm bunların nasıl kullanılacağı yeri göreceksiniz.

  • Blogger Kumanda Paneli Git > Şablon 
  • HTML'yi Düzenle Tıklayın 
  • Devam düğmesi Şablonunuzda 

aşağıdaki kodu bulun
]]></b:skin>
Yukarıdaki kodun üzerine aşağıdaki kodu ekleyin;
.button, .button:visited {
 background: #222 url(https://lh6.googleusercontent.com/-RaMNq0L55WU/UDfk7ueTCzI/AAAAAAAAF74/FRfnmuhj5NE/s50/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}

.button:hover {
 background-color: #111;
 color: #fff;
}

.button:active {
 top: 1px;
}

.small.button, .small.button:visited {
 font-size: 11px
}

.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}

.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}

.pink.button, .magenta.button:visited {
 background-color: #e22092;
}

.pink.button:hover {
 background-color: #c81e82;
}

.green.button, .green.button:visited {
 background-color: #91bd09;
}

.green.button:hover {
 background-color: #749a02;
}

.red.button, .red.button:visited {
 background-color: #e62727;
}

.red.button:hover {
 background-color: #cf2525;
}

.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}

.orange.button:hover {
 background-color: #d45500;
}

.blue.button, .blue.button:visited {
 background-color: #2981e4;
}

.blue.button:hover {
 background-color: #2575cf;
}

.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}

.yellow.button:hover {
 background-color: #fc9200;
}
Şablonunuzu kaydedin. Şimdi blogunuzun içine düğmeleri stilleri ekledik, bunları kullanmak için nasıl yapıldığını görelim. 
Bu Düğmeler Nasıl Kullanılır? 
 Ben, mesaj yazarken bunları kullanmak için basit adımlar aşağıda butonları gösteriyorum. Her türlü HTML kodunu veriyorum aşağıda. 
Bu düğmeler, kullanımı çok kolay 

  • HTML'yi Düzenle sekmesine yazılan tıklayın düzenlerken 
  • Aşağıda düğme kodunu seçin ve yapıştırın 
  • Sizin ile bağlantılar ve bağlantı adlarını değiştirin

1. HTML Code Büyük Düğmeler -
<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>
2. HTML Kodu Küçük Butonlar -
<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>
LINK HERE Yazan yere sadece Linkleri yazınız 
LINK TEXT HERE Yazan yere ise Link ve Başlıkları yazınız

4 yorum :

Butonları kendi bloğumda kullanmayı planlıyorum. Paylaşım için teşekkürler...

Rica ederim arkadaşlar kolay gelsin.

hocam bu butonları hover yapamazmıyız

@nazlım yılmaz, dediğiniz çalışmayı daha önce bu kodlar üzerinde görmediğim için bilmiyorum ama şöyle bir şey yapabilirsiniz:

.yellow.button, .yellow.button:visited {
background-color: #ffb515;
}
Fakat üstüne gelindiğinde şu stilde olur:

..yellow.button,yellow.button:visited :hover {
background:#000000;
}
bunu deneyebilirsiniz.

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.