Szczegóły mają znaczenie. Zgodzisz się ze mną? Dlatego dzisiaj pokażę Ci jak zmienić mało atrakcyjne okienko wyszukiwania na blogu na takie z którego będziesz dumna. To nie jest trudne, a w dodatku wiem, że możesz nie mieć czasu/ochoty na zajmowanie się taki drobiazgami, dlatego przygotowałam też kilka gotowych rozwiązań. Na początek zobacz różnicę.
Zmień to:
[accordion title=’1. kod’]
<form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text" value="np. babeczka" style="height: 25px; background: none; border: #a3a3a3 solid 1px;"/> <input id="search-btn" value="Search" type="image" src="https://lh3.googleusercontent.com/oX6V0oNurN2JN2rLhMu5GEXnifqJSPd-JjaFd0DGlCzJ=w116-h117-no" style="width:30px; margin-left: 10px; "/></form>
[/accordion]
[accordion title=’2. kod’]
<form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text" value="np. babeczka" style="height: 25px; background: none; border: #a3a3a3 solid 1px;"/> <input id="search-btn" value="Search" type="image" src="https://www.krysztofiak.studio/wp-content/uploads/2015/06/wyszukaj3.png" style="width:30px; margin-left: 10px; "/></form>
[/accordion]
[accordion title=’3. kod’]
<form id="searchthis" style="display: inline;" action="search" method="get"> <input id="search-btn" style="height: 25px; background:#e1e1e1; border: none;" name="q" size="25" type="text" value="np. babeczka" /><input id="search-btn" style="width: 30px; margin-left: 10px;" src="https://www.krysztofiak.studio/wp-content/uploads/2015/06/Lupa3.png" type="image" value="search" /></form>
[/accordion]
Edycja wyglądu
1. Napis w okienku.
Zamień napis np. babeczka, który znajduje się w kodzie na swój własny, bądź usuń go jeśli chcesz, aby okienko było puste.
[accordion title=’Podejrzyj’]
<form id="searchthis" style="display: inline;" action="search" method="get"> <input id="search-btn" style="height: 25px; background:#ffb1b1; border: none;" name="q" size="25" type="text" value="np. babeczka" /><input id="search-btn" style="width: 30px; margin-left: 10px;" src="https://www.krysztofiak.studio/wp-content/uploads/2015/06/wyszukaj.png" type="image" value="search" /></form>
[/accordion]
2. Usunięcie ramki
W pierwszej sekcji style po istniejącej już wartości dodaj ;border: none
[accordion title=’Podejrzyj’]
<form id="searchthis" style="display: inline;" action="search" method="get"> <input id="search-btn" style="height: 25px; background:#ffb1b1; border: none;" name="q" size="25" type="text" value="np. babeczka" /><input id="search-btn" style="width: 30px; margin-left: 10px;" src="https://www.krysztofiak.studio/wp-content/uploads/2015/06/wyszukaj.png" type="image" value="search" /></form>
[/accordion]
Zmiana kolory tła.
W pierwszej sekcji style po istniejącej już wartości dodaj ;background:#000000, zmieniając #00000o na wybrany kod koloru
[accordion title=’Podejrzyj’]
<form id="searchthis" style="display: inline;" action="search" method="get"> <input id="search-btn" style="height: 25px; background:#000000; border: none;" name="q" size="25" type="text" value="np. babeczka" /><input id="search-btn" style="width: 30px; margin-left: 10px;" src="https://www.krysztofiak.studio/wp-content/uploads/2015/06/wyszukaj.png" type="image" value="search" /></form>
[/accordion]
Zamian długości i wysokości okienka.
W celu zmiany długości okienka zmień wartość w sekcji size, natomiast aby zmienić jego wysykość zmień wartość height. [accordion title=’Podejrzyj’]
<form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="30" type="text" value="np. babeczka" style="height:20px; background:#000000"/> <input id="search-btn" value="Search" type="image" src="https://lh3.googleusercontent.com/oX6V0oNurN2JN2rLhMu5GEXnifqJSPd-JjaFd0DGlCzJ=w116-h117-no" style="width:30px; margin-left: 10px; margin-bottom:-10px"/></form>
[/accordion]
Zmiana przycisku.
Lupkę możesz zamienić na dowolny obrazek podmieniając link znajdujący się kodzie.
[accordion title=’Podejrzyj’]
<form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text" value="np. babeczka" style="height:35px; background:#000000"/> <input id="search-btn" value="Search" type="image" src="https://lh3.googleusercontent.com/oX6V0oNurN2JN2rLhMu5GEXnifqJSPd-JjaFd0DGlCzJ=w116-h117-no" style="width:30px; margin-left: 10px; margin-bottom:-10px"/></form>
[/accordion]
Przygotowałam dla Was kilka gotowych przycisków. Aby pobrać linki do wybranego kliknij na niego prawym przyciskiem myszy i wybierz „Kopiuj adres URL grafiki”
To jak? Przyda się?
Nice 🙂 Do tej pory unikałam tego okienka, ale teraz może je sobie zainstaluję 😉
Świetne 🙂
Przyda się na pewno 😀
Super, bardzo przydatne:)
Przyda się ! Moze akurat „TO” uda mi się zrobić 😀
Za jedną kawę się za to zabieram. Jesteś wspaniała !
Czy kod 1/2 na pewno jest w porządku? Coś dziwne rzeczy mi wychodzą;)
U mnie to samo. Zwykłe okienko i w dodatku jakby podwójne :/
Poprawiłam wszystko. Jeśli zdecydujecie się sprawdzić czy jest ok, dajce znać.
Teraz działa, dzięki 🙂 Mam jeszcze tylko jedno pytanie, czy tą lupkę można jakoś obniżyć, bo mam wrażenie jakby była wyrwnana do górej krawędzi okienka, a lepiej wyglądałaby na środku.
No ja mam dokladnie ten sam problem i tez juz zadalam to samo pytanie ( jak wysrodkowac lupke) Karolinie, ale niestety jeszcze czekam na odpowiedz ;( A Tobie udalo sie to naprawic?
Niestety nie :/ Tak samo nie mogę zmienić koloru ramki okienka i czcionki żeby dopasować je do czcionki na blogu :/
Ojej! ja nawet tego nie probowalam zrobic – to juz wyzsza szkola jazdy jak dla mnie 😉 dopiero zaczynam swoja przygode z blogowaniem i przyznaje, ze niezbyt lubie grzebac w kodzie HTML. Zawsze mam wrazenie, ze cos schrzanie 😉 tak wiec nawet nie bralam sie za probe zmiany czcionki. Najbardzie razi mnie w oczy ta nieszczesna lupka, ktorej do tej pory nie koge rozgryzc, a Karolina niestety nie odpowiada ;(
Pewnie ma inne rzeczy na głowie, musimy cierpliwie czekać 🙂 Będzie miała chwilę, to na pewno pomoże, a u mnie na razie wisi ta lupka taka podniesiona do góry.
Tak wiem 😉 widzialam eladnie posty na jej FB i Google+ ze otwiera firme a wiec caly czas jest zaprzatnieta dostosowaniem bloga od strony graficznej – przechodzi calkowita metamorfoze poczawszy od loga az po textury, czcionki itd. Prace sa nadal w toku, ale juz przebija sie ten( jak ja to okreslilam) paryski szyk i elegancja 🙂
Dokładnie, musimy cierpliwie poczekac a jak znajdzie tylko chwolke to napewno pomoze naprostowac Nam te lupki 😉 A swoja droga to, pozwolisz ze sie zapytam jakiego bloga prowadzisz? A masz moze fanpaga na Facebooku albo w G+? Fajnie mi sie z Toba rozmawia ( mamy te same problemy 😉 ) i pomyslalam ze byloby milo gdybysmy mogly dodac siebie nawzajem do kontakow na tych portalach społecznościowych aby podtrzymac ta znajomosc? 😉 co ty na to? 🙂 😉
Bardzo chętnie 🙂 Prowadzę bloga kosmetycznego http://www.potejstronielustra.pl/ (zapraszam), tam znajdziesz linki do mojego profilu na instagramie, fb i G+ 🙂
Ooo! no to super! 🙂 ja prowadze bloga lifestyle’owo – parenting’owego 😉
http://justasportymama.blogspot.co.uk/
Ja rowniez zapraszam do odwiedzenia mojego raczkujacego bloga 😉
Tam tez znajdziesz do linki do moich profili na FB, Insta, Pintesrest i G+ 🙂
Dziewczyny. Jeśli się rozjeżdża to jest prosty sposób możemy wyregulować położenie lupki ingerując w jej marginesy.
Na końcu kodu jest coś takiego
Jeśli lupka jest za wysoko to dodajcie margin-bottom:-10px;
Tak to będzie wyglądało:
style=”width:30px; margin-left: 10px; margin-bottom:-10px; „/>
Jeśli lupka jest za nisko dodajcie margin-top: -10px;
Tak to będzie wyglądało.
style=”width:30px; margin-left: 10px; margin-top:-10px; „/>
Dajcie znać czy wiecie o co chodzi i czy działa. Wybaczcie za opóźnienie z odpisywaniem!
Cudownie mieć takiego adwokata!:)
Dzięki za obronę!:P
Zawsze do usług 😉
oj przyda, przyda 🙂
Przy kodzie nr 1 wychodzi coś takiego… Jak to zmienić?
Zresztą przy każdym z tych kodów wychodzą takie cuda… Coś jest z nimi nie tak 🙁
U mnie tez to samo 🙁 …uff a juz myslalam, ze tylko ja mam ten sam problem
😉 🙁
Naniosłam poprawki w sposobie wyświetlania kodu i powinno być teraz. Nawet taki szczegół jak czcionka może wszystko popsuć:)
Faktycznie teraz dziala bez zarzutow 🙂 az trudno uwierzyc, ze nawet nieodpowiednia czcionka moze wszystko popsuc. Ale mam jedno ALE.Wszystko zrobilam wg. instrukcji, ale lupka wyswietla mi sie troszke za wysoko i nie wiem jak ja wysrodkowac, zeby byla w jednej linni z oknem wyszukiwania?
Wyglada to dokladnie tak jak na zdjeciu nizej
Dodaj w sekcji style: „position: relative; top: +10px”
Zrobilam wedlug Twoich instrukcji ( bardzo Ci dziekuje za to 😉 ) ale niestety nic sie nie zmienilo? 🙁 Wstawilam to na samym poczatku kodu, o tu:
To jest to, co zapomniałam napisać xD Sorki.
Pozycjonowanie dodajemy nie w pierwszym „style”, a w „style” odnoszącym się do obrazka, czyli w części po drugim input id=”search-btn”
O, taki kod jest u mnie:
Gdyby jeszcze nie wyszło spróbuj ze zmianą znaku + na – i wstawieniem w styl pierwszego input.
Dziewczyny. Jeśli się rozjeżdża to jest prosty sposób możemy wyregulować położenie lupki ingerując w jej marginesy.
Na końcu kodu jest coś takiego
Jeśli lupka jest za wysoko to dodajcie margin-bottom:-10px;
Tak to będzie wyglądało:
style=”width:30px; margin-left: 10px; margin-bottom:-10px; „/>
Jeśli lupka jest za nisko dodajcie margin-top: -10px;
Tak to będzie wyglądało.
style=”width:30px; margin-left: 10px; margin-top:-10px; „/>
Dajcie znać czy wiecie o co chodzi i czy działa. Wybaczcie za opóźnienie z odpisywaniem!
Hurrraaahh!!!! No nareszcie udalo sie! Troche topornie mi to szlo 😉 moze dlatego, ze moj mozg juz nie trybi tak jak powinien bo jest juz 00:25 . Twarda sztuka z tej lupkie 😉 dlugo sie opierala i nie chciala zejsc na dol, ale nareszcie udalo sie!!! Ufff, jak dobrze ;)Dziekuje Ci bardzo @Karolina – pomoglas i to nie wiesz nawet jak bardzo 😉
P.S. Mam jescze tylko jedno pytanie. A w jaki sposob mozna dostosowac czcionke tekstu wpisywanego w okienko?
Ja na stronach mam czcionke : Josefin Sans i taka chcialabym miec tez w okienku.
Tym razem dopisać musisz wartość we wcześniejsze części kodu -> font-family: Josefin Sans;
Przykład:
……
Kurcze, no zrobilam tak jak powiedzialas i niestety cos mi nie dziala? ;( Chyba w dobre miejsce to wpisalam??? Wyglada to tak:
Przydało się, dziękuję 🙂
cool! kolejny raz dziękuję 🙂
Bardzo dziękuję! Przydało się 🙂
Jesteś genialna w tłumaczeniu szczegółów:) – jasno, prosto, konkretnie i skutecznie! Po prostu profesjonalnie!
Jesteś wielka! Dzięki za ten wpis 🙂
Kochana, dziękuję za instrukcję, długo takiej szukałam! Mam prośbę- czy mogłabyś pomóc mi wyrównać pole search nad nagłowkiem do prawej? Wyglada to tak: http://nalewoodcentrum.blogspot.com/ Będę bardzo wdzięczna! Pozdrawiam, Jola
po raz kolejny dziękuje! :*
Hej, dziękuję bardzo za przydatny poradnik, b. często korzystam z Twojej strony! 🙂 Mam pytanie odnośnie własnego okienka wyszukiwania: czy wyszukiwarka, do której podajesz wyżej kody jest oparta na google? Chciałam użyć tego kodu na swoim blogu, bo nie podoba mi się okienko wyszukiwania w szablonie, z którego korzystam, ale niestety ta wyszukiwarka nie znajduje odmienionych słów.. Tzn. np. jeśli na blogu użyłam słowa „psa” to po wpisaniu w wyszukiwarkę słowa „pies” otrzymuję zero wyników, muszę wpisać dokładnie „psa”, żeby wyszukiwarka to znalazła. Google z odmianą sobie radzi. Masz może na to jakąś radę? Z góry serdecznie dzięki 🙂
co i gdzie mam wpisać aby wyszukało w mojej stronie np. przepis kulinarny
oto kod
Super, dzięki!
Super sprawa, udało się wszystko! Dzięki 🙂
Kurczę, bardzo dziękuję za ten post! Nawet nie wiesz, jak bardzo mi się przydał i pomógł! 😀
Już mam! Super, dziękuję.
Dziękuję! Mam teraz piękną lupkę 🙂