Na pewno wiele z Was szuka sposobu jak wstawić gadżet wyszukiwania na swoim blogu. Tak samo jak dotychczasowe wpisy odnośnie ikonek społeczościowych czy graficznego czytaj dalej ten jest równie prostu i zajmuje dosłownie chwilę, aby go dodać. Mowa tu o następującym elemencie (zaznaczony na czerwono)
Co musimy zrobić ?
1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript
2. Gdy otworzy się okno HTML/JavaScript wpisujemy 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>
3. To jest kod podstawowy, wszystkie parametry możemy pozmieniać według preferencji :
- 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 tła (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
- 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 -
- khtml-border-radius: 10px; - ta cześć odpowiada za zaokrąglenie narożników
- 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..."
- <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 "czego szukasz " wedle uznania,ważne, aby było zmienione we wszystkich 3 miejscach
- <input id='wc-searchblacksubmit1' type='submit' value='Szukaj'/> - adekwatnie możemy zmienić ten element na np search
4. Zapisujemy całość i cieszymy się nowym gadżetem :)
Pozdrawiam serdecznie,
Glammadame1990:***
Brak komentarzy:
Prześlij komentarz