Jak zmienić wygląd gadżetu szukaj

01.06.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ą.

12 komentarzy:

  1. Świetna sprawa taki ładny gadżecik, chyba potrafisz wszystko upiększyć na blogu:)

    OdpowiedzUsuń
  2. Super, że pomagasz innym bloggerom w tworzeniu szablonów ;) Myślę, że zajrzę do tego postu przy kolejnej zmianie

    OdpowiedzUsuń
  3. Świetnie wytłumaczone :) Warto wykorzystać te informacje przy zmianie wizualnej bloga :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Też tak mi się wydaje, że warto ;)

      Usuń
  4. Prowadzisz bardzo pomocny blog
    tego szukałam :)!
    http://tattooed-brain.blogspot.com/

    OdpowiedzUsuń
  5. Ladies imagination9 czerwca 2016 17:51

    Jak zrobić tak wyglądający gadżet "wyszukaj" jak u Ciebie w prawym górnym rogu? Męczę się z tym i nie mam pojęcia jak to zrobić :(

    OdpowiedzUsuń
  6. Całej instrukcji nie będę tu pisać, bo za długo. Powiem Ci tylko, że robi się to za pomocą HTML i CSS

    OdpowiedzUsuń
  7. Ladies imagination9 czerwca 2016 21:22

    To wiem :) dzieki

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia