Blogové návody: Jak na vyhledávání

Zdravím kulíšci. Dnes si ukážeme jak si dát do menu vyhledávání podle našeho gusta. 

Chceme-li obyčejný vyhledávač zkopírujeme tento html kód.

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

Vypadá nějak takto.




Vyhledávání klíčových slov. Pokud chcete přidat klíčová slova nahradíme slovo "text" např. life, lifestyle apod. Slovo text najdete před těmito znaky /> .

Změna písma v rámečku. Místo anglického search si dovnitř můžete napsat třeba vyhledat. stačí přepsat kód value="search" .

Změna velikosti. Vyhledávač si můžete přizpůsobit podle sebe. Stačí přepsat číslovku v následujícím kódu size='30' .

Pomocí klíčových kódů si můžeme vyhrát se vzhledem samotného rámečku.


Např. zde jsem napsala za style tento kód: style="border: 1px dashed red" a mám čárkované orámování. 


Zde jsem místo style dala zase pro změnu tento kód style="border: 1px dashed #8d38c9; background:#FAAFBA;" . A tím jsem vlastně vytvořila čárkované orámování a růžové pozadí. 



A tady už je jen růžové pozadí .Celkový kód na tento rámeček bude vypadat takto:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" style="background:#FAAFBA;" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>


Přidání obrázku
Samozřejmě místo search můžeme mít hezčí search a to přidáním obrázku.


Html na tohle bude vypadat takto. Samozřejmě musíte za odkaz na obrázek napsat .a formát obrázku např u mě je to.  rrggshdh.png

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="30" type="text" /> <input align="top" id="search-btn" src="adresaobrazku.png" type="image" /></form>


Nastavení 

A teď už nám zbývá to vlastně celé hodit na blog.
Najedeme si do rozvržení .


Přidat gadget.



Vložíme html a celé to uložíme. :))

Doufám,že vám návod alespoň malinko pomohl. Věřte není na tom nic složitého. :)

Žádné komentáře:

Okomentovat

Děkuji za komentář ! :)

Instagram