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ę. :)