Jak zmienić wygląd gadżetu szukaj

poniedziałek, 1 czerwca 2015

Blogger ma wśród swoich gadżetów gadżet wyszukiwania, który po dodaniu nie wygląda zbyt ciekawie, ale za to jest bardzo przydatny, bo pozwala na przeszukanie danego bloga wpisując hasła. W dzisiejszym wpisie chce Wam pokazać jak zrobić aby nasz gadżet nie tylko był przydatny, ale również ciekawie wyglądał. Dla przypomnienia nasz gadżet po dodaniu wygląda tak:

Aby zmienić jego wygląd wystarczy dodać do arkusza CSS następujący kod:

#CustomSearch1_form {
margin: 10px -2px -25px -5px;
}
input.gsc-search-button {
background:#000;
border-width: 1px;
letter-spacing:1px;
border-radius: 3px;
border-color: #000;
border-style: solid;
color: #444;
margin: 0 0 0 0 !important;
width: 75px !important;
font-family: 15px Verdana;
height: 35px !important;
}
input.gsc-search-button:hover {
background: #eee;
border-color: #eee;
letter-spacing: 2px;
color: #000;
cursor: pointer;
}
input.gsc-input {
height: 33px !important;
padding: 0 !important;
max-width: 500px !important;
}
td.gsc-search-button {
width: 25% !important;
}
table.gsc-search-box td.gsc-input {
padding: 0px !important;
width: 75% !important;
}
table.gsc-search-box {
margin: 0 0 10px 0 !important;
}

Analiza naszego kodu:

Ta część kodu to marginesy naszego gadżetu. Pierwszy margines to margines górny, drugi to margines prawy, trzeci to margines dolny, a czwarty to margines lewy.

#CustomSearch1_form {
margin: 10px -2px -25px -5px;
}

Kolejna część kodu odpowiada za nasz button, czyli przycisk wyszukaj przed najechaniem na niego myszką.
Tło, grubość ramki, odstęp między literami, zaokrąglone narożniki, kolor ramki, styl ramki, kolor tekstu, marginesy, szerokość, wielkość czcionki i rodzaj, wysokość

input.gsc-search-button {
background:#000;
border-width: 1px;
letter-spacing:1px;
border-radius: 3px;
border-color: #000;
border-style: solid;
color: #444;
margin: 0 0 0 0 !important;
width: 75px !important;
font: 15px Verdana;
height: 35px !important;
} 

Następna część kodu, odpowiada za button po najechaniu na niego kursorem.
Tło, kolor ramki, odstęp między literami, kolor tekstu

input.gsc-search-button:hover {
background: #eee;
border-color: #eee;
letter-spacing: 2px;
color: #000;
cursor: pointer;
}

Kolejna część kodu dotyczy pola wyszukiwania
Wysokość 

input.gsc-input {
height: 33px !important;
padding: 0 !important;
max-width: 500px !important;
}

I to tyle jeśli chodzi o jakiekolwiek zmiany. Efekt końcowy widnieje u mnie na blogu w kolumnie bocznej. Dzisiaj krótka instrukcja, ale na środę szykuję już większą.

Jeśli spodobał Ci się wpis, przekaż go dalej :)