Blogger Buton Yapimi CSS3 ile

Daha önce blogger butonlarında baloncuklu olanları sizinle paylaşmıştık.Şimdi ise yine 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 linki rahatlıkla veebilirsiniz.
Blogger Butonlarını blogunuza uygulamak için;

ÖRNEK GÖRÜNÜM

BUTON YAZISI BUTON YAZISI BUTON YAZISI BUTON YAZISI BUTON YAZISI BUTON YAZISI

BUTON YAZISI BUTON YAZISI BUTON YAZISI BUTON YAZISI BUTON YAZISI BUTON YAZISI

1. Blogger Hesabımızla Giriş Yapıyoruz.
2. Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et yolunu takip edip HTML kodlarımızın bulunduğu alana geliyoruz.
3. HTML kodları içerisinde Ctrl+F 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;
}

şablonumuzu kaydedip çıkıyoruz.
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 olarak bü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

1. BLOGGER BUTON HTML KODLARI (Büyük Buton) 

<center><a href="LINKI BURAYA" class="large button pink" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="large button blue" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="large button green" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="large button orange" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="large button red" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="large button yellow" >BUTON YAZISI BURAYA</a></center>

2.  BLOGGER BUTON HTML KODLARI (Orta Boy Buton)   

<center><a href="LİNK BURAYA" class="medium button pink" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="medium button blue" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="medium button green" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="medium button orange" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="medium button red" >BUTON YAZISI BURAYA</a></center>

<center><a href="LİNK BURAYA" class="medium button yellow" >BUTON YAZISI BURAYA</a></center>

LİNK BURAYA yazana yere butonu tıklyınca görüntülemek istediğiniz linki yazıyoruz.
BUTON YAZISI BURAYA:Yazan yere buton içerisinde görünmesini istediğimiz kelimeyi yazıyoruz.
Örnek:<center><a href="www.blogmimari.blogspot.com" class="medium button pink" >BBLOG MİMARI</a></center>

Posted in: blogegr eklentileri,blogger buton,blogger buton yapimi,blogger eklentileri,butonlar,renkli css butonlar