Blogging - Cum repari optiunea de cautare de pe blog?

Astăzi tratăm problema gadget-ului de căutare de la Google. Am sesizat în nenumărate rânduri următoarea situație: caut un anumit termen pe un blog și căutarea nu îmi returnează niciun rezultat. Iar acest lucru se întâmplă exclusiv pe gadget-ul de căutare oferit de Blogger. Așa că vă voi arăta în rândurile ce urmează cum puteți să preveniți asta. Pentru un demo accesați acest link Introduceți în ambele casete de căutare termenul postare și observați cum caseta de căutare de la Google nu returnează rezultate în timp ce alternativa oferită în acestă postare va afișa toate articolele care conțin cuvântul postare.

Pentru a putea vedea toate modificările în timp real vom începe cu inserarea codului gadget-ului în sine și abia apoi vom personaliza aspectul. Prima dată vom accesa ramura Aspect din tabloul de bord iar în bara laterală vom adăuga un nou gadget. Din fereastra care apare veți selecta gadget-ul de tip HTML

Inserați codul următor și salvați

<div id='search'>

<form action='/search' id='searchform' method='get'>

<input id='searchsubmit' type='submit' value='Search'/>

<input id='s' name='q' placeholder='Search Site' type='text' value=''/>

</form>

</div>

Prima parte este gata. Trecem la personalizare. Accesați secțiunea Șablon - Personalizați - Avansat - Adăugați CSS și inserați codul următor:

#search {
 width:100%;
 padding: 0px 0px ;
 margin: 20px 0px 0px 0px;
 height:35px;
 display:inline;
 overflow:hidden;
}
#search form {
 margin: 0px 0px 0px 0px;
 padding: 0;
}

#search fieldset {
 margin: 0;
 padding: 0;
 border: none;
}

#search p {
 margin: 0;
 font-size: 85%;
}

#s {
 color: rgb(47,46,78);
width: 70%;
height: 32px;
font-family: 'Verdana';
font-size: 13px;
border: 1px solid #dddddd;
background:#ffffff;
padding: 0 0 0 4px;
}
input#searchsubmit{
 float:right;
 display:inline;
 height:32px;
 width:60px;
 background: #cbcbcb;
 color: white;
 border:none;
 margin-left: 2px;
 font-family: 'Verdana';
 font-size: 13px;
}
input#searchsubmit:hover{
 background: #cccccc;
}

Veți vedea că deja s-a schimbat aspectul. Lucruile pe care le puteți schimba sunt în aceste linii de cod:

#s {
 color: rgb(47,46,78);
width: 70%;
height: 32px;
font-family: 'Verdana';
font-size: 13px;
border: 1px solid #dddddd;
background:#ffffff;
padding: 0 0 0 4px;
}
input#searchsubmit{
 float:right;
 display:inline;
 height:32px;
 width:60px;
 background: #cbcbcb;
 color: white;
 border:none;
 margin-left: 2px;
 font-family: 'Verdana';
 font-size: 13px;
}
input#searchsubmit:hover{
 background: #cccccc;
}

Puteți să măriți sau să micșorați caseta unde introduceți termenii de căutat. Acum este setat la 70% însă puteți să schimbați valoarea sau puteți trece la măsurarea în pixeli de genul 280px în loc de 70%.
Vă recomand să lăsați înălțimile așa cum au fost setate.
Se poate schimba fontul din Verdana în Times New Roman, Courier etc. Și bineînțeles că puteți face fontul mai mic sau mai mare.

border: 1px solid #dddddd;  setează grosimea chenarului, tipul linie ( linie dreaptă ) cât și culoarea acesteia.

background:#ffffff; și background:#cbcbcb; setează fundalul fie pentru căsuța unde introduceți termenii, fie pentru butonul de căutare.

Color se referă la culoarea fontului.

input#searchsubmit:hover{
 background: #cccccc;
}

este pentru culoarea pe care o dați butonului de căutare în momentul în care plasați cursorul pe buton. Pentru o listă de culori accesați acest link .

Și de aici puteți să vă jucați cu valorile sau puteți lăsa totul ca mai sus, în funcție de preferințele voastre.

Întrebările pentru acest articol sunt:

• Folosiți opțiunea de căutare pe blogurile voastre?
• Preferați să utilizați gadget-urile implicite de la Blogger sau vă bazați mai mult pe cele venite din alte surse?