Blogger Hover Etiket Bulutu Gadget Eklentisi


Blogger blogunuzda farklı etiket kategorisi kullanarak, Hover CSS Bulut görünümlü etiket stilini blogunuza uygulayıp, değişik bir hava verebilirsiniz. Hover CSS Bulut etiketi yazılarımıza verdiğimiz etiketlerden oluşmaktadır. Etiket Gadgetimizi ekledikten sonra blog şablonumuza ekleyeceğimiz küçük bir kod ile, etiketlerin üstüne gelindiğinde hareket eden, tıklandığında renk değiştiren ve istediğiniz büyüklük ayarını yapabileceğiniz çok güzel bir eklentidir. Eklentiyi birkaç aşamada kullanabilmemiz eklentiyi dahada özelleştiriyor.

Eklenti uygulaması :

  1. Blogunuzun şablon yedeğini alın. İki türlü yedek alınır lütfen bilgi edinin.
  2. Blog yerleşim ayarlarından Etiketler (Labels) Gadgetine tıklayın.
    Gadgetleri açtığınızda en alttan 3. sırada yer almakta
  3. Etiket (Label) Gadgetini aşağıda resimde görüldüğü gibi ayarlayın.
    Seçilenler, sıklığa göre ve Bulut kısmını işaretleyin. Seçilenler kısmını açıp etiketlerinizden istediklerinizi seçerek tam bir kategori görünümüne döndürebilirsiniz.

Etiketler (Label) Gadgetini yapılandırın

  1. Yapacağımız uygulamada iki tür görüntü elde edebiliriz. Siz hangi görseli beğeniyorsanız aşağıda açıkladığım stili uygulayabilirsiniz.
    a. Font Size 10 Px değerini yükselterek görünümün büyük olmasını sağlayabilirsiniz.
    Örnek : px 10 değeri, 15 veya 20 yapabilirsiniz. Etiketler bu uygulamadan sonra biraz daha büyüyecektir.
    b. Etiket değerini değişmeden kullanabilirsiniz. (10 px. ebadındaki görüntü)

Label (Etiket) Font Size Kaldırılmamış görünüm

c. Font Size 10 px. silerek blogger değerlerini kullanabilirsiniz. (Örnek resim aşağıda görülmekte.)
Font Size sildiğinizde blog etiketlerinizdeki yazı fazlalığına göre, etiket sayısı artacağından etiket çevresi genişleyecektir.

Label (Etiket) Font Size Kaldırılmış görünüm

  1. Blog paneline giriş ⇒ Şablon HTML Düzenle ⇒ bu etiketi bulun. “CTRL+F” klavye arama penceresi.
]]></b:skin>
Bu etiketi bulduktan hemen sonra aşağıdaki kodu kopyalayın ve bu kodun hemen üstüne yapıştırıp kaydedin.
Blog görüntüleme kısmından inceleyin ve stil olarak hangisi hoşunuza gidiyorsa Font Size ile değişikler yaparak kullanın. Görsellerin siyah görülmesinin nedeni test blogumda siyah tema kullanmamdan kaynaklanmaktadır. Siz hangi temayı kullanıyorsanız, o renk ile görünüm sağlayacaksınız. Problem yaşarsanız yorum yazarak yardım alabilirsiniz.
.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #C6C6C6; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
color:#666; 
}

.label-size:hover { 
border:1px solid #6BB5FF; 
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix( 
 M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1; 
}

.label-size a { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover { 
text-decoration: none; 
}
 

 

Reklamlar

UNUTMAYIN! YORUMLAR DİĞER KULLANICILARA YOL GÖSTERİR

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s