Blogger Rengarenk 3D Buton CSS3

 CSS3 ile yapılmış rengarenk butonları sizinle paylaşacağız.Sizinle paylaşacağımız Blogger Butonları (pembe, yeşil, mavi, kırmızı, turuncu ve sarı) 6 farklı renkte, 2 boyutta tasarlanmış (büyük ve orta ölçekli) olup blogunuza uygulaması gayet basit olan bir eklentidir.Blogger butonlarını isteğinize göre kullanabilirsiniz, buton içeriğini normal bir yazı yazar gibi değiştirebilir bu butonlara istediğiniz linkleri verebilirsiniz



Renkli Blogger Butonlarını blogunuza uygulamak için;

1. Öncelikle Blogger Hesabımızla Giriş Yapıyoruz.
2. Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et Şeklinde Yolları Takip Ediyorsunuz vE bulunduğu alana geliyoruz.
3. HTML kodları içerisinde Ctrl+F Tuşları  yardımı ile  ]]></b:skin> kodunu aratıp buluyoruz.
4. Aşağıdaki kodu kopyalayıp bulduğumuz  ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

.button, .button:visited {
 background: #222 url(http://helperblogger.googlecode.com/svn/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;
}

İlk İşlemleri yaptıktan sonra Sıradi İşlemleri Yapnız

5-Blogger Butonlarını Nasıl Kullanacağız?
Daha sonra yazı içerisinde blogger butonunu kullanmak istediğimiz yere aşağıda verdiğimiz buton kodlarından birtanesini seçip eklemeniz yeterli olacak.Örnek olarakbüyük pembe butonu eklemek istiyorsanız <center><a href="LİNK BURAYA" class="large button pink" >BUTON YAZISI BURAYA</a></center> kodunu eklemeniz yeterli