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:

pole-wyszukowania-blogger-szukaj

 

 

 

na to:

 

 

Jak dodać ładne okienko wyszukiwania?

 

Po zalogowaniu do bloggera przejdź do zakładki UKŁAD i w miejscu w którym chcesz dodać okienko dodaj nowy gadżet o nazwie HTML/Java Script. W jego treść wklej jeden z poniższych kodów. Możesz też sama zmodyfikować wygląd okienka – jak to zrobić w dalszej części.

 

[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]

 

[accordion title=’4. kod’]

<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]

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”

LupaLupa3lupa2wyszukajwyszukaj2wyszukaj3

 

 

To jak? Przyda się?

sciskam-karolina1-300x157