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.

Anlatılan konunun CANLI DEMOSU’ nu inceleyin.

4. 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. Örnek büyütülmüş hali yukarıdaki resimdir.
b. Etiket değerini değişmeden kullanabilirsiniz. (10 px ebadındaki görüntü)

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.

5. Blog paneline giriş ⇒ Şablon ⇒ HTML Düzenle ⇒ Widget Genişlet ve aşağıdaki kodu bulun

]]></b:skin>

Bu kodu 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 reng de görünüm sağlayacaksınız.

.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; 
}

Problem yaşarsanız yorum yazarak yardım alabilirsiniz.