Blogger Buton Yapımı Hazır Css Buton Eklentisi

ads

ads

Blogger buton eklentisi 

Blogger kullanıcıları için özel olarak hazırlanmış bu eklenti sayesinde blogunuza  daha şık ve güzel görünüm katacaksınız    butonlarla herşey  yapabilirsiniz  kategorilendirme vs  aklınıza ne gelirse link vererek bu islemi gerçekleştirebilirsiniz ..

Eklentinin canlı demosu  sitemizin sag üst kenarındaki butonlardır. yalnızca butonlar rengarenktir  siz istediğiniz rengi verebilirsiniz kodların içinde   ayar yaparak bizim sitemizdeki sadece black siyah renktir...

Şimdi gelelim kurulumuna :

Blogger Butonlarını blogunuza uygulamak için;

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 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

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.ibrahimfirat.net" class="medium button pink" >İF</a></center> 

ads