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:









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.

9 komentarzy:

  1. Często nie ma co robić z etykietkami i mało do nich ciekawych efektów. Ten się jednak do takowych zdecydowanie zalicza, a skomplikowany nie jest. Chociaż to może kwestia tego, jak ładnie Kociak to przedstawiła :3

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za jakże profesjonalny komentarz, Filipie xD

      Usuń
  2. Hej! Dobry pomysł na etykiety:D Chociaż znam już parę efektów
    ten też się pewnie przyda.Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Zachęcam do korzystania. I dziękuję za komentarz! <3

      Usuń
  3. Hym... ciekawy pomysł na etykiety :) Pogrzebie coś w kodach a instrukcje wykorzystam :)
    Pozdrawiam xx
    Lailaa ;3

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za komentarz i rzecz jasna zachęcam do korzystania! <3
      Pozdrawiam również. :)

      Usuń
  4. A ja mam takie pytanie, gdzie to wstawć jeśli w swoim szablonie nie mam takiego kodu?

    OdpowiedzUsuń
    Odpowiedzi
    1. Cześć. ;)
      Taki kod powinien być w każdym szablonie. Poszukaj pod: Label1, Label2. Tam gdzieś powinny być te wredne nawiaski.

      Usuń
    2. A możesz mnie naprowadzić w którym wierszu mogę tego szukać?

      Usuń

statystyka

Archiwum bloga

Obserwatorzy