Menu

6 Adet Hover Efekli Blogger Etiketleri

Blogger blok sahiplerinin en büyük sorunlarının başında site trafiğinin artmamasındır,bunların pek çok nedeni bulunmaktadır.SEO Mektebi olarak düşüncemiz yeterince içerik üretilmemesi ve site tasarımının kullanışlı olmamasıdır.

Aşağıda kullana bileceğiniz CSS kodları ile etiketlerle oluşturduğunuz kategorileriniz oldukça güzel görünecektir,bu 6 adet hover efekli blogger etiketleri css kodları ile blogger blok siteniz şık bir görüntüsü oluşacaktır.


6 Adet Hover Efekli Blogger Etiketleri


---Blogger Alışveriş E-Ticaret Temaları 3 Adet

---Blogger İçin Yüzer Sosyal Medya Widget 1

---13-Blogger Makalelerine Video Ekleme

6 Adet Hover Efekli Blogger Etiketleri CSS Kodlarını Yüklemek İçin

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.

6 Adet Hover Efekli Blogger Etiketleri


İç Dolgulu Blogger Etiketler

6 Adet Hover Efekli Blogger Etiketleri

.Label li {        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;        border: 1px solid;        border-radius: 6px 6px 6px 6px;        float: left;        font-size: 116%;        list-style: none outside none;        margin: 2px;        padding: 4px;        transition: all 0.3s ease 0s;    }.Label li:hover {    transform: rotate(351deg) scale(1.7);}.Label a {    color: #fff;    text-decoration: none;
}

Her Blok Sayfasında Kullanılabilecek Blogger Etiket


6 Adet Hover Efekli Blogger Etiketleri
.Label a {    color: #000000;    text-decoration: none;}.Label li {    border: 1px solid #000;    border-radius: 6px 6px 6px 6px;    color: #000000 !important;    float: left;    font-size: 116%;    list-style: none outside none;    margin: 2px;    padding: 4px;    transition: all 0.3s ease 0s;}.Label li:hover {    transform: rotate(5deg);}

Oldukça Şık Blogger Etiketler

6 Adet Hover Efekli Blogger Etiketleri

.Label a:hover{text-shadow:5px 5px 5px #dcdcdc;background:orange;border:1px solid orange;border-bottom-right-radius: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 30px;border-top-right-radius: 30px;}.Label li {    border: 1px solid;    border-radius: 6px 6px 6px 6px;    color: #000000 !important;    float: left;    font-size: 116%;    list-style: none outside none;    margin: 2px;    padding: 4px;    transition: all 0.3s ease 0s;}.Label a {    color: #000;    text-decoration: none;}.Label li:hover {    transform: rotate(5deg);
}

Hareketli Blogger Yeşil Turuncu Etiketler

6 Adet Hover Efekli Blogger Etiketleri
.Label a {     -moz-border-bottom-colors: none;     -moz-border-left-colors: none;     -moz-border-right-colors: none;     -moz-border-top-colors: none;     background-color: #7FBF4D;     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);     border-bottom-right-radius: 30px;     border-color: #63A62F #63A62F #5B992B;     border-image: none;     border-style: solid;     border-top-left-radius: 30px;     border-width: 1px;     box-shadow: 0px 1px 0px 0px #96CA6D inset;     color: #FFFFFF;     float: left;     font: 14px verdana;     height: 18px;     margin-bottom: 9px;     margin-left: 10px;     padding: 10px;     position: relative;     text-decoration: none;     transition: all 0.5s ease-in-out 0s;}
.Label a:hover {     background: none repeat scroll 0% 0% orange;     border-radius: 0px 30px 0px 30px;     border: 1px solid orange;     text-shadow: 5px 5px 5px #DCDCDC;}
.Label {     margin: 0px;     padding: 0px;     position: relative;}.Label li:hover {    transform: rotate(5deg);}.Label li {    float: left;    font-size: 116%;    list-style: none outside none;    transition: all 0.3s ease 0s;}

 Yuvarlak Köşeli Blogger Etiketler 


6 Adet Hover Efekli Blogger Etiketleri
.Label a{padding-left:20px;background:#00b2b2;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; }

Mavi Parlak Blogger Etiket Bulutu 

6 Adet Hover Efekli Blogger Etiketleri

.Label a{  background: rgb(0,100,180);
background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));
background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );
border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none; margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}.Label a:hover{color:#000 !important; background:#123d60;}


6 Adet Hover Efekli Blogger Etiketleri CSS Kodlarını Düzenleme:

NOT:SEO Mektebi olarak verdiğimiz 6 adet blogger etiketleri hover efekli css kodlarından sadece birini kullanınız.

Ayrıca #XXXXXX şeklindeki renk kodları ile oynayarak site tasarımınıza uygun olan rengi elde edebilirsiniz.Ve kodların içinde bulunan sayısal değerlerle oynayarak etiket şekillerini değiştirebilirsiniz.

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

2 yorum '' 6 Adet Hover Efekli Blogger Etiketleri"

YORUM EKLE
  1. Yanıtlar
    1. Ömer bey uyarınız için teşekkürler,gerekli düzenlemeler yapıldı,lütfen tekrar deneyiniz.

      Sil

Önerilen Yazı
×