5/30/2016

5 wyszukiwarek na bloga!


Wyszukiwarka to ważna rzecz, która powinna się znajdować na każdym blogu - dlatego podam wam 5 kodów CSS na różne wyglądy wyszukiwarek!


Na początek dodajecie wyszukiwarkę a później wklejacie kod i możecie się cieszyć oryginalnym wyglądem! :)

Kody wklejamy w Projektancie szablonów!

OBJAŚNIENIE

#CustomSearch1_form {
 margin: 10px -2px -25px -5px; } - margines wyszukiwarki
 input.gsc-search-button {
 background:#000; - tło przycisku*
border-width: 1px; - grubość ramki przycisku
 letter-spacing: 0px; - odstępy między literami 
 border-radius: 0px; - zaokrąglenie ramki
 border-color: #000; - kolor ramki
 border-style: solid; - rodzaj ramki*
 color: #fff; - kolor liter
 margin: 0 0 0 0 !important;
 width: 80px !important; 
 margin-top: 10px; - margines górny
 font: 11px Open sans; - wielkość czcionki i nazwa
font-weight: bold; - pogrubienie*
text-transform: uppercase; - wielkie litery
 height: 35px !important; 
 transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; }
 input.gsc-search-button:hover { 
background: #fff; - kolor tła po najechaniu
border-color: #000; - kolor ramki po najechaniu
letter-spacing: 0px; - odstępy między literami po najechaniu
 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; }

Objaśniłam tylko te najważniejsze :)

Wartości zaznaczone na czerwono można zmieniać!
*Kolory:
#000 - czarny
#fff - biały
#ccc - szary
Pozostałe ->Tu<-

*Rodzaje ramek
solid - ciągła
double - podwójna
dashed - kreskowana
dotted - kropkowana
none - bez ramki

*Wszelkie wartości:
uppercase, bold można usunąć wpisując na ich miejsce - none

 Wszelkie pytania pisać komentarzach!

1. Wyszukiwarka


#CustomSearch1_form {
 margin: 10px -2px -25px -5px; }
 input.gsc-search-button {
 background:#000; 
border-width: 1px;
 letter-spacing: 0px;
 border-radius: 0px;
 border-color: #000;
 border-style: solid;
 color: #fff;
 margin: 0 0 0 0 !important;
 width: 80px !important;
 margin-top: 10px;
 font: 11px Open sans; 
font-weight: none; 
text-transform: uppercase;
 height: 35px !important; 
 transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; }
 input.gsc-search-button:hover { 
background: #fff;
border-color: #000; 
letter-spacing: 0px;
 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; }


2. Wyszukiwarka


#CustomSearch1_form { margin: 10px -2px -25px -5px; } input.gsc-search-button { background:#ffbde0; border-width: 0px; letter-spacing: 2px; border-radius: 1px; border-color: #000; border-style: solid; color: #fff; margin: 0 0 0 0 !important; width: 100px !important; margin-top: 10px; font: 8px Open sans; font-weight: none; text-transform: uppercase; height: 35px !important; transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; } input.gsc-search-button:hover { background: ; border-color: ; letter-spacing: ; color: #fff; 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; }


3. Wyszukiwarka 


#CustomSearch1_form { margin: 10px -2px -25px -5px; } input.gsc-search-button { background:#ffc774; border-width: 1px; letter-spacing: 2px; border-radius: 0px; border-color: #ffc774; border-style: solid; color: #fff; margin: 0 0 0 0 !important; width: 85px !important; margin-top: 10px; font: 10px Open sans; font-weight: none; text-transform: uppercase; height: 35px !important; transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; } input.gsc-search-button:hover { background:#fff; border-color: #ffc774; letter-spacing: 2px; color: #ffc774; 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; }




4. Wyszukiwarka 


#CustomSearch1_form { margin: 10px -2px -25px -5px; } input.gsc-search-button { background:#acd2ff; border-width: 1px; letter-spacing: 0px; border-radius: 100px; border-color: #acd2ff; border-style: solid; color: #fff; margin: 0 0 0 0 !important; width: 85px !important; margin-top: 10px; font: 13px Open sans; font-weight: none; text-transform: none; height: 35px !important; transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; } input.gsc-search-button:hover { background:#fff; border-color: #acd2ff; letter-spacing: 0px; color: #acd2ff; 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; }




5. Wyszukiwarka


#CustomSearch1_form { margin: 10px -2px -25px -5px; } input.gsc-search-button { background:#94ff9f; border-width: 1px; letter-spacing: 1px; border-radius: 1px; border-color: #94ff9f; border-style: ; color: #fff; margin: 0 0 0 0 !important; width: 85px !important; margin-top: 10px; font: 14px Open sans; font-weight: none; text-transform: none; height: 35px !important; transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; } input.gsc-search-button:hover { background:#fff; border-color: #94ff9f; letter-spacing: 1px; color: #94ff9f; 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; }

Oryginalny kod pochodzi z Blonparii.

Która wyszukiwarka przypadła ci do gustu?
Więcej postów tego typu?

PODPIS
Zobacz również
Etykiety: ,

22 komentarze:

  1. Klaudyynka30/5/16

    Przydatny post !:) różowa najładniejsza 😜pozdrawiam Cie i obserwuje :) claudiyye.blogspot.com

    OdpowiedzUsuń
  2. Niedoskonała 30/5/16

    Ogarniam się w CSSie, a tego akurat nie znałam! Fajny post :D
    Pozdrawiam serdecznie, Ruciakowa :)

    OdpowiedzUsuń
  3. Anonimowy31/5/16

    Mi najbardziej podoba się różowa :) Bardzo fajny post. Zawsze zastanawiałam się jak dodać wyszukiwarkę. Może jak będę miała chwilkę czasu to przysiądę się do komputera i dodam wyszukiwarkę?
    Przy okazji dziękuję, że wpadłaś na mojego bloga
    Obserwuję i czekam na więcej :)
    Zapraszam na mojego bloga
    Pozdrawiam, Pati
    mój blog-> KLIK!

    OdpowiedzUsuń
  4. Unknown31/5/16

    Dla mnie żółta jest bardzo oryginalna :) Dzięki za przydatny post!

    Ultra kobiecy blog o muzyce:

    gitaraiszpilki.blogspot.com

    OdpowiedzUsuń
  5. Book Majka31/5/16

    Dla mnie te kody to czarna magia, ale mam nadzieję że przez wakacje nieco się podszkolę :) Ładne projekty, wyszukiwarka z różowym śliczna, z niebieskim oryginalna :)

    justmajka.blogspot.com

    OdpowiedzUsuń
  6. Anonimowy1/6/16

    Przydatne te kody :)

    Mój blog (klik) :)

    OdpowiedzUsuń
  7. ASajecka1/6/16

    Dzięki kodom CSS można zdziałać naprawdę cuda :)
    Przydatny post.
    Pozdrawiam,
    sajecka.blogspot.com

    OdpowiedzUsuń
  8. Unknown1/6/16

    Przydatne! :)

    OdpowiedzUsuń
  9. Anonimowy1/6/16

    Bardzo przydatny post. Kiedyś na pewno z niego skorzystam ^^
    Pozdrawiam! wy-stardoll.blogspot.com

    OdpowiedzUsuń
  10. mylife-tasia1/6/16

    Świetne, przydatne!:)
    Poklikałabyś w linki (klik) bardzo mi zależy:)

    http://mylife-tasia.blogspot.com/2016/05/blog-post.html

    OdpowiedzUsuń
  11. Joanna2/6/16

    O super, bardzo przydatne.
    http://joanna-szwed.blogspot.com/

    OdpowiedzUsuń
  12. Sara2/6/16

    Bardzo fajny i przydatny post dla osób, które szukają pomocy przy kodach ;))

    U mnie nowy post, zapraszam!
    MÓJ BLOG - KLIIK

    OdpowiedzUsuń
  13. Kinga Kwiecień2/6/16

    Całkiem fajne! A ja mam taką brzydką u siebie. Nooo ale niebawem będę zmieniać na swoim blogu wszystko jak leci, jak będzie na nim wyszukiwarka to może dopasuję którąś z Twoich;D

    www.kwietniowaaa.blogspot.com

    OdpowiedzUsuń
  14. TruskaweczkaRecenzjeKsiążek3/6/16

    Różowa najfajniejsza hah :) Przydatny post na pewno ktoś skorzysta :)

    Truskaweczka

    OdpowiedzUsuń
  15. Sara's City4/6/16

    Ja mam podobny czaro-biały. Fajnie, że pomagasz innym :)

    Pozdrawiam
    Sara's City

    OdpowiedzUsuń
  16. Sylwia4/6/16

    świetny post :*
    http://poziomka1.blogspot.com/

    OdpowiedzUsuń
  17. Unknown4/6/16

    Super! Bardzo lubię takie posty, na pewno wskazówki przydadzą się wielu osobom :)
    Mój blog

    OdpowiedzUsuń
  18. Wooho4/6/16

    Bardzo fajny i przydatny post :)wiecej takich :*

    https://wooho11.blogspot.com - Zapraszam <3 Jeśli Ci się spodoba - zaobserwuj :) Na pewno się odwdzięczę :*

    OdpowiedzUsuń
  19. Anonimowy5/6/16

    Fajnie, że robisz takie posty i oby jak najwięcej takich! Mam wyszukiwarkę na blogu, która podoba mi się, ale kiedyś na pewno jeszcze skorzystam z tego wpisu. :) Trzymaj się ciepło! Arleta

    OdpowiedzUsuń
  20. Veronica Lucy5/6/16

    Bardzo przydatny post, na pewno pomoże wielu blogerom :)
    Zapraszam do mnie, może wspólna obserwacja? :)

    veronicalucy.blogspot.com

    OdpowiedzUsuń
  21. Sylwia VamppiV Błach13/6/16

    Fajny wpis!

    OdpowiedzUsuń

→ Napisz coś więcej niż "Zapraszam do mnie".
→ Każdy blog zostawiony w komentarzu odwiedzam. ^.^
→ Usuwam komentarze typu Obs za Obs.
→ Dziękuje za każdy szczery komentarz ♥

Subskrybuj: Komentarze do posta (Atom)