27 Aralık 2012 Perşembe
+Font+Size+15+px+yap%C4%B1lm%C4%B1%C5%9F+g%C3%B6r%C3%BCnt%C3%BC.png "Hover CSS Bulut görünümlü etiket")
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.
+yap%C4%B1land%C4%B1rma.png "Etiketler (Label) Gadgetini yapılandırın")
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ü)
+Font+Size+Kald%C4%B1r%C4%B1lmam%C4%B1%C5%9F+g%C3%B6r%C3%BCn%C3%BCm.png "Label (Etiket) Font Size Kaldırılmamış görünüm")
Font Size sildiğinizde blog etiketlerinizdeki yazı fazlalığına göre, etiket sayısı artacağından etiket çevresi genişleyecektir.
+Font+Size+Kald%C4%B1r%C4%B1lm%C4%B1%C5%9F+g%C3%B6r%C3%BCn%C3%BCm.png "Label (Etiket) Font Size Kaldırılmış görünüm")
| ]]></b:skin> |
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;
}
