Jak wstawić gadżet wyszukiwania i dostosować jego wygląd

3 grudnia 2014


Gadżet wyszukiwania,każdy zna. Jest to bardzo pomocny gadżet,szczególnie przy blogach lifestylowych,ponieważ umożliwia nam wyszukanie danego artykułu bez przeszukiwania całego bloga. W dzisiejszym tutorialu pokaże wam jak w prosty sposób wstawić swój własny gadżet wyszukiwania i dostosować jego wygląd do naszego bloga.

1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript


2. Kiedy otworzy nam się okno HTML/JavaScript  wpisujemy następujący kod:

<style>
#wc-searchblack1
{
background: #0db7b3;
border-radius:10px;
width:280px;
}

#wc-searchblackbox1
{
padding:10px;
}

#wc-searchblacksubmit1
{
border:1px solid #ff5353;
background: #ff5353;
padding:5px;
color:#ffffff;
font:14px Times New Roman;
}

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
width:178px;
font:14px Times New Roman;
}

</style>
<div id='wc-searchblack1'>
         <form name="input" action="Link do naszego bloga/search"  method="get"  id="wc-searchblackbox1"> 
            <input name="q" id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Wyszukaj...";}' onfocus='if (this.value == "Wyszukaj...") {this.value = ""}' type='text' value='Wyszukaj...'/>
            <input id='wc-searchblacksubmit1' type='submit' value='Szukaj'/>
         </form>
      </div>
2a. Analizujemy kod.

Ta część odpowiada za ten element:

           <style>
#wc-searchblack1 
{
background: #000000; - tło naszego gadżetu,możemy je zmienić na dowolny kolor,jeśli chcemy aby było przezroczyste wpisujemy transparent.
border-radius: 10px; - zaokrąglone narożniki (jedna wartość odpowiada wszystkim czterem narożnikom) naszego tła,wartość zmienna,wartość wystarczy zmienić na 0 aby zaokrągleń nie było. Jeśli chcemy mieć zaokrąglony każdy narożnik inaczej to zamieniamy tą linijkę na border-radius: 30px 30px 20px 20px - pierwsza liczna to górny lewy narożnik,druga liczba to górny prawy narożnik,trzecia liczba to dolny prawy narożnik,a czwarta to dolny lewy narożnik.
width:280px; - szerokość naszego tła 
}

#wc-searchblackbox1
{
padding:10px; - odpowiada za szerokość naszego tła.
}
Ta część odpowiada za ten element:

#wc-searchblacksubmit1
{
border:1px solid #fff; - grubość ramki,rodzaj ramki,kolor ramki. Rodzaje obramowań: solid - linia ciągła, double - linia podwójna, dashed - linia kreskowana, dotted - linia kropkowana
background: #000; - kolor tła,przycisku wyszukiwania
padding: 5px; - szerokość przycisku 
color:#ffffff; - kolor napisu 
font:14px Times New Roman; - rozmiar i rodzaj czcionki przycisku 
}
Ta część odpowiada za ten element:

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;  - ta cześć odpowiada za zaokrąglenie narożników
-webkit-border-radius: 10px;
border:1px solid #ffffff; - grubość ramki,rodzaj ramki i grubość ramki 
background:#ffffff; - kolor tła pola wyszukiwania 
padding:5px; - szerokość pola wyszukiwania
color:#888888; - kolor tekstu pola wyszukiwania 
width:178px; - długość pola wyszukiwania
font:14px Times New Roman; - wielkość i rodzaj czcionki wyrazu "wyszukaj..." 
}
</style>
<div id='wc-searchblack1'>
         <form name="input" action="Link do naszego bloga/search"  method="get"  id="wc-searchblackbox1">  - dokładnie ma to wyglądać tak:  
<form name="input" action="http://blonparia.blogspot.com/search"  method="get"  id="wc-searchblackbox1"> 
            <input name="q" id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Wyszukaj...";}' onfocus='if (this.value == "Wyszukaj...") {this.value = ""}' type='text' value='Wyszukaj...'/>  - słowo "wyszukaj..." możemy zmienić np na "wpisz czego szukasz" wedle uznania,ważne jest aby było zmienione w 3 miejscach 
            <input id='wc-searchblacksubmit1' type='submit' value='Szukaj'/> - tak samo,możemy zmienić wedle własnego uznania np na search

        </form>
      </div>
3. Klikamy zapisz i nasz gadżet widnieje na naszej stronie

3 komentarze:

  1. Mało kiedy zdarza się, że wszytko jest tak dokładnie opisane :) Twoja wskazówki są bardzo przydatne, obserwuję by z łatwością skorzystać z Twoich rad :))

    OdpowiedzUsuń
  2. Świetne są te Twoje tutoriale, kiedy w końcu zachce mi się zabrać za odświeżenie mojego bloga, na pewno się przydadzą:)

    OdpowiedzUsuń
  3. Dziękuję za wskazówki!

    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