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.zyj-kochaj-tworz.pl/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.zyj-kochaj-tworz.pl/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.zyj-kochaj-tworz.pl/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.zyj-kochaj-tworz.pl/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.zyj-kochaj-tworz.pl/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ę?
