Menu

Blogger CSS Etiketler Yapma

Blogger eklentileri ile sitelerimizi düzenlemek oldukça keyiflidir,bu düzenlemelerde Blogger CSS kodları oldukça işimizi görüyor.

Aşağıda yayınladığımız Blogger CSS kodları ile Blogger etiket yayınlarını veya etiket yayınları ile oluşturduğunuz kategorileri oldukça sevimli renklere getirebilirsiniz


Blogger CSS Etiketler Yapma





Benimde Sağlık sitemde kullandığım bu eklenti aşağıdaki resimde gibidir ve demoya bakmak için aşağıdaki demo linkine tıklayınız.

Blogger CSS Etiketler Yapma
                                                                     

CSS3 ile Blogger Bulut Etiketlerini Özelleştirme 

1-İlk önce Blogger.com giriş yapınız sonra Şablon/ HTML Düzenle adımlarını takip ediniz.

2-Kodu yükleyeceğiniz yeri bulmak için,kodumuz CSS olduğu için
 ]> </ b:skin> buluyoruz.
Bu kodu bulmak için
 ]> </ b:skin> kodunu kopyalayarak Ctrl + F tuşlarına basıp kodlarınızın içinde aratın

3-Bulduğunuz
 ]]> </ b:skin> kodunun üstüne aşağıda verdiğim kodu ekleyiniz ve son olarak Şablonunuzu kaydediniz.

Blogger CSS Etiketler Yapma

.Label a{padding-left:20px;padding:0 20px;color:#fff!important;border-radius:100px;-moz-border-radius:100px;height:25px;line-height:32px;text-transform:uppercase;text-decoration:none;border:none !important;-webkit-transition:all .3s ease-in-out !important;t: 20pxt: 20px;margin-left:5px;margin-top:5px;font-size:14px; }.Label a:hover{color:#000 !important;background:#ff0; }img.label_thumb{float:left;margin-right:10px !important;height:65px; width:65px; border: 1px solid #fff;}.Label ul li:nth-child(1){background-color:#f1c40f}.Label ul li:nth-child(2){background-color:#f39c12}.Label ul li:nth-child(3){background-color:#2ecc71}.Label ul li:nth-child(4){background-color:#27ae60}.Label ul li:nth-child(5){background-color:#e67e22}.Label ul li:nth-child(6){background-color:#d35400}.Label ul li:nth-child(7){background-color:#3498db}.Label ul li:nth-child(8){background-color:#2980b9}.Label ul li:nth-child(9){background-color:#ea6153}.Label ul li:nth-child(10){background-color:#c0392b}.Label ul li:nth-child(11){background-color:#f39c12}.Label ul li:nth-child(12){background-color:#2ecc71}.Label ul li:nth-child(13){background-color:#27ae60}.Label ul li:nth-child(14){background-color:#f1c40f}.Label ul li:nth-child(15){background-color:#e67e22}.Label ul li:nth-child(16){background-color:#d35400}.Label ul li:nth-child(17){background-color:#3498db}.Label ul li:nth-child(18){background-color:#2980b9}.Label ul li:nth-child(19){background-color:#ea6153}.Label ul li:nth-child(20){background-color:#c0392b}.Label ul li:nth-child(21){background-color:#f39c12}.Label ul li:nth-child(22){background-color:#2ecc71}#wrappernbt #wrapper-footernbt {  background: #333333; }


4-Blogger Yerleşim/Gedget adımlarını takip ederek Etiketler Gedgetını ekleyiniz.

Blogger CSS Etiketler Yapma


Blogger CSS Etiketler Yapma

Blogger Etiketlerini isterseniz kategorileriniz için Liste olarak kullanabilirsiniz veya isterseniz Bulut şeklinde kullanabilirsiniz.

CSS Kodlarını Düzenleme:
Aşağıdaki CSS kodları içindeki #XXXX şeklindeki renk kodlarını istediğiniz gibi değiştirebilirsiniz.Ayrıca XXpx şeklindeki sayısal değerle oynayarak istediğiniz yazı büyüklüğünü sağlayabilirsiniz.

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

2 yorum ''Blogger CSS Etiketler Yapma"

YORUM EKLE
  1. Yanıtlar
    1. İsmet bey;uyarınızı dikkate alarak kodları değiştirdim yeni yayınladığım kodları denemenizi öneririm,ilginiz için teşekürler

      Sil

Önerilen Yazı
×