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.

Czytaj dalej >>

2# szukajka do etykiet [instrukcja]

Problem z mnogością etykiet spotkał mnie podczas prac nad szablonem dla Panda Graphics. Tagów na blogach bywa naprawdę sporo, a przeciętny czytelnik może się podczas ich przeszukiwania łatwo zgubić. Dlatego też opracowałam sposób na szybkie i skuteczne wyszukiwanie pośród dodawanych do postów etykiet, z którym zapoznać możecie się czytając ten post.
Gadżet, w najprostszej wersji prezentuje się w następujący sposób:

Zaczynamy od utworzenia gadżetu. Wchodzimy w profilu bloga na bloggerze w układ > dodaj gadżet > HTML/JavaScript. 

Umieszczamy w nim następujący kod:

<form action="/search/" method="get">
<input  name="label" placeholder="szukaj w etykietach..." size="26" type="text" />
</form>

Zmieniamy  szukaj w etykietach... na dowolny, odpowiadający nam tekst. Rozmiar zmieniamy dzięki size="wpisz rozmiar". 

To by było na tyle. Poważnie. Nic więcej nie trzeba robić żeby gadżet funkcjonował i działał poprawnie. Czytelnik po wpisaniu poszukiwanej frazy i wciśnięciu enter będzie mógł bez problemu odnaleźć się pośród naszych etykiet.

Nie byłabym jednak sobą, gdybym nieco nie utrudniła zadania i nie zdecydowała się na małą obróbkę. W końcu wszystkim zależy również na tym, by blog prezentował się imponująco. A można i to osiągnąć odrobinę modyfikując nasz gadżet. :)
Efekt, który osiągniemy prezentuje się następująco:

Nieco modyfikujemy naszą wyszukiwarkę. w gadżeciie HTML/JavaScript wklejając:

<form action="/search/" id="wyszukaj" method="get">
<input id="szukajka" name="label" placeholder="Szukaj w etykietach..." size="18" type="text" />
<input type="submit" value="szukaj" id="przycisk" />
</form>

Zmieniając szukaj na własny tekst zmieniamy treść, która pojawia się na klawiszu po prawej stronie naszej szukajki.

Searchboxy, jak widać powyżej wyglądają dość prosto i nieco ponuro.  Możemy je ozdobić korzystając z arkusza CSS.

Wchodzimy w szablon > dostosuj > zaawansowane > dodaj arkusz CSS. Tam też możemy nieco nasz gadżet urozmaicić.



Selektory, z których będziemy korzystac to #szukajka oraz #przycisk, a powyższy efekt osiągnęłam korzystając z takiego kodu:

#szukajka {
background: #2b2b2b; /*tło pola wyszukiwarko*/
font-size: 10px; /*rozmiar czcionki*/
border: 5px solid #2b2b2b; /*ramka*/
}

#przycisk {
background: #216802; /*tło przycisku*/
font-size: 10px; /*rozmiar czcionki na przycisku*/
border: 5px solid #216802; /*ramka przycisku*/
color: white; /*kolor czcionki przycisku*/
margin-left: -5px; /*odległość przycisku od pola szukajki*/
}

Zachęcam do zabawy i eksperymentowania z szukajką. Nie zapomnijcie o zapoznaniu się z zasadami i pozostawieniu waszych prac w pobieralni! Chętnie je obejrzę. :)

Czytaj dalej >>