13# Etykiety w chmurze

Witam serdecznie!

W dzisiejszej instrukcji przedstawię Wam kilka tricków, które z pewnością pomogą Wam w urozmaiceniu etykiet w Waszych szablonach i na blogach, które prowadzicie. Efekt, który osiągniemy moim zdaniem z pewnością poprawi funkcjonowanie i styl tego gadżetu na stronach.
Prezentuje się on następująco:

Pierwsza Etykieta (19) Druga Etykieta (17) III Etykieta (15) IV Etykieta (13) Etykieta nr 5 (10) Etykieta (9) Szósta Etykieta (9) VII Etykieta (7) Ósma Etykieta (5) IX Etykieta (3) Label(2)

Zaczniemy od drobnej korekty w kodzie HTML, dzięki której liczba postów na etykietę wyświetlała się będzie w linku, a nie poza nim.
W panelu naszego bloga należy kliknąć na Szablon, by następnie wejść w Edytuj kod HTML. Po kliknięciu w pole z kodem, należy użyć skrótu klawiszowego CTRL+F, by wyszukać:

<span class='label-count' dir='ltr'>(<data:label.count/>)</span>

Usuwamy powyższy fragment, by następnie wyszukać:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Powyższy kod odrobinę edytujemy. W jego miejsce należy wkleić:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
(<data:label.count/>)
</a>

Po tym kroku możemy przejść do ozdobienia naszych etykiet. By osiągnąć powyższy efekt przechodzimy ponownie do sekcji Szablon w panelu bloga. Klikamy Dostosuj by przejść do zakładki Zaawansowane. W dodaj arkusz CSS dodajemy poniższy kod:

#Label1 a {
float:left;
padding-top: 2px 8px;
margin:3px 3px 0 0;
font-size:8px;
text-transform: uppercase;
background: #4a8f0d;
letter-spacing: 2px;
font-family: Arial;
color: white;
transition: 0.4s;
}

#Label1 a:hover {
transform: scale(1.3);
transition: 0.4s;
background: #206700;
}

Rzecz jasna zachęcam do modyfikowania powyższego kodu w zależności od Waszych potrzeb. :)
Koniecznie dajcie znać, czy instrukcja przypadła Wam do gustu!
Pozdrawiam.