eMaupie figle z szablonami
Blog > Komentarze do wpisu

Pimp my search - Blox i "odpicowany" pasek wyszukiwania

Jeśli znudził Ci się standardowy pasek wyszukiwarki na blogu, to polecam kilka prostych tricków, które sprawią, że stanie się on ładniejszy. Pomysł na "odpicowanie" wyszukiwarki przyszedł mi do głowy gdy odwiedziłem bloga longway (swoją drogą bardzo polecam lekturę). Cały efekt końcowy, który swoją drogą można zobaczyć w prawym górnym rogu mojego bloga, sprowadza się do zastosowania trzech prostych zmian...

1. Cień pod polem tekstowym

Nadmiarowe, wydawać by się mogło, opakowanie elementrów wyszukiwarki w kodzie html bloxa, doskonale nadaje się do wykorzystania przy tym efekcie. Kod ten wygląda mniej więcej tak:

<div id="BlogPrzeszukiwanie">
    <div id="BlogPrzeszukiwanieText">
        <input type="text" name="blog_search"/>
    </div>
    <div id="BlogPrzeszukiwanieKlawisz">
        <input type="submit" value="Szukaj"/>
    </div>
</div>

Stosując prosty trick z ujemnymi marginesami, można przesunąć elementy "BlogPrzeszukiwanieText" i "BlogPrzeszukiwanieKlawisz" względem zawartych w nich pola tekstowego i przycisku, uzyskując efekt podobny do cienia. Odpowiednie klasy w stylu CSS wyglądają następująco:

#BlogPrzeszukiwanieText, #BlogPrzeszukiwanieKlawisz {
    background: #D7A760;
    display: inline;
    float: left;
    margin-left: 2px;
    margin-top: 2px;
    height: 24px;
    border: 0px none;
}
#BlogPrzeszukiwanieKlawisz {
    margin-left: 4px;
}
#BlogPrzeszukiwanieText input, #BlogPrzeszukiwanieKlawisz input {
    background: #FFFFFF;
    border: 1px solid #B8852E;
    color: #7D7D7D;
    padding: 2px 4px;
    position: relative;
    top: -2px;
    left: -2px;
    height: 24px;
}

Gotowy efekt wygląda następująco:

Cień pod polem wyszukiwania
Tu przy okazji pytanie - kto wie jak zmusić IE, by wyświetlił poprawnie przycisk Szukaj? Przedstawiony powyżej kod pod tą przeglądarką wyświetla przycisk przesunięty o 1 px w pionie względem pola tekstowego.

2. Obrazek zamiast przycisku

Do wykonania tej zmiany, standardowy kod html bloxa niestety już nie wystarcza. Z pomocą przychodzi jednak prosty, lecz genialny w swej prostocie trick. Mianowicie, zamiast włączać pole wyszukiwania w opcjach konifguracyjnych bloxa, wystarczy w polu na dodatkowy kod html (zakładka Wygląd/Elementy) wkleić własny kod formularza wyszukiwania, w którym zamienimy przycisk na obrazek.

<form id="BlogPrzeszukiwanieForm" action="http://www.blox.pl/html" method="post">
    <div id="BlogPrzeszukiwanie">
        <div id="BlogPrzeszukiwanieText">
            <input type="text" name="blog_search"/>
        </div>
        <div id="BlogPrzeszukiwanieKlawisz">
            <input type="image" src="http://cssmonkey.blox.pl/resource/search.gif"/>
        </div>
        <input type="hidden" name="weblog_name" value="cssmonkey"/>
        <input type='hidden' name='parentPage' value='webLogView'/>
        <input type='hidden' name='page' value='blogPublicSearch'/>
    </div>
</form>

Przykładowy kod zamieściłem powyżej. W miejscach wytłuszczonych należy oczywiście wpisać dane swojego bloga.

Efekt końcowy wygląda tak:

Ikona zamiast przycisku Szukaj

3. Tekst zachęty

Jeśli poprzednie modyfikacje macie już za sob±, to ostatnia pójdzie gładko. Wystarczy, tak jak w poprzednim przypadku w zmodyfikowanym kodzie html wyszukiwarki dopisać kawałek javascript we właściwościach pola przeszukiwania. Chodzi o dwie proste funkcje wywoływane w momencie, gdy pole to zyskuje i traci focus. Pierwsza z nich ukrywa standardowy tekst zachęty (w moim przypadku jest to "Szukaj na blogu") pozwalaj±c użytkownikowi na wpisanie szukanej frazy, druga natomiast pokazuje go ponownie, gdy użytkownik zrezygnuje z wpisywania.

Kod zamieszczam poniżej:

<input type="text" name="blog_search" value="Szukaj na blogu" onBlur="if(this.value == '') { this.value = 'Szukaj na blogu'; this.style.color = '#707070'; }" onFocus="if(this.value == 'Szukaj na blogu') { this.value = ''; this.style.color = '#000000'; }"/>

Należy go wkleić w odpowiednim miejscu (zamiast 4 linijki) do kodu html z punktu 2.

Efekt końcowy - "odpicowana" wyszukiwarka, wygląda tak:

Gotowy pasek wyszukiwania
sobota, 12 stycznia 2008, e-maupa

Polecane wpisy

  • Podstawy layoutu CSS - część III

    Trzy to dobra liczba, jeśli chodzi o ilość notek w blogowym cyklu. Nie za dużo, nie za mało, lecz w sam raz by nakreślić "zarys wstępu do podstaw" tem

  • Podstawy layoutu CSS - część II

    Jeśli zainteresowała Cię poprzednia notka, to zapraszam do przeczytania kolejnej części cyklu o podstawach layoutu za pomocą CSS. Kontynuując temat, dziś zajmie

  • Podstawy layoutu CSS - część I

    Dziś, zgodnie z obietnicą, rozpocznę mały kurs podstaw layoutowania za pomocą CSS. Jeśli próbowałeś kiedyś zmienić układ swojego bloxa a nie bardzo wiesz jak si

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Ikony na Bloxa z cssMonkey
Dziś przygotowałem zestaw ikon do wykorzystania w szablonach bloxowych. Jest pięć zestawów w różnych kolorach. W każdym zestawie znajdują się ikony w trzech rozmiarach 16x16 px, 24x24 px oraz 32x32 px. Przykład użycia zestawu brązowego można zobaczyć ... »
Wysłany 2008/01/18 22:19:49
Komentarze
2008/01/17 15:12:11
A jak zrobić aby widget Blogfroga wyświetlał się po prawej stronie?

PS Fajny blog! Pisz częściej ;)
-
2008/01/17 19:21:00
Dzięki za zachętę ;) Postaram się wygospodarować trochę więcej wolnego czasu i wrzucać notki częściej.
Co do Blogfroga, trzeba dodać atrybut float: right; do klasy w CSS w jakiej znajduje się widget. W moim przypadku kod wygląda tak:

#BloxFrog {
   float:right;
}

.InfoPodTekstem p {
   float:right;
   margin:0pt;
   padding:0pt;
   position:relative;
   top:-12px;
}

Dwie definicje są po to, że skrypt wstawiający widget, którego używam generuje inny kod dla strony z komentarzami, niż dla strony głównej. Jeśli używasz skryptu eskeya, to powinieneś zmienić właśnie te dwie klasy.
-
dr.brain
2008/01/26 14:24:13
Postompiłem z godnie z instrukcjami ale strasznie rozciągneło mi ikonę. I nie wiem dla czego. Pomocy!!!
-
2008/01/26 17:06:29
dr.brain:
Winna jest właściwość width:70px; w definicji klasy div#BlogPrzeszukiwanieKlawisz input Usuń ją i ikona będzie miała domyślny rozmiar (widzę, że wybrałeś 32x32px).
Swoją drogą polecam jeszcze usunięcie pozostałych właściwości w tej klasie i zostawienie tylko margin-left:5px; Myślę, też że możesz srpóbować użyć mniejszej ikonki z zestawu (np. 24x24px). Pozdrawiam :)
-
small24
2008/01/31 12:44:00














No tak, ale gdzie w tym kodzie znajduje sie wartosc width ?
Wrzucam tylko ten kod i ikone mam rozciagnieta !!
-
2008/01/31 13:47:32
small24:
W kodzie CSS dr.brain miał ustawioną właściwość width. W twoim CSS widzę, że też masz ustawione w klasie "div#BlogPrzeszukiwanieKlawisz input" width:55px; Możliwe, że szablon którego używasz miał wcześniej ustawioną tą szerokość. Sprawdź, czy nie masz dwóch definicji tej klasy u siebie w szablonie.
-
Gość: WojtekB., *.neoplus.adsl.tpnet.pl
2008/06/19 17:28:26
Witaj. Mam takie pytanie:

Chciałbym, żeby na moim blogu wyszukiwarka była umieszczona nad kalendarzem. Albo chociaż na górze tak jak u Ciebię. Jak to zrobić?
-
kasica_k
2008/08/25 06:05:23
Po krótkich zmaganiach udało mi się zaadaptować Twoje rozwiązanie w swoim blogu. Już drugi raz korzystam z Twoich pomysłów - dzięki!