Adaugă o casetă de căutare pe bara de navigare

A trecut o perioadă bună de timp de când n-am mai scris un articol inclus în categoria Blogger. Acest lucru se cauzează Bacalaureatului dar şi faptului că mi-am stabilit un template blogului la care n-am mai adus nici cele mai mici modificări. Cu vreo două zile în urmă m-am gândit că ar fi mai estetic dacă aş poziţiona caseta de căutare pe bara de navigare (meniu orizontal), astfel economisind spaţiu din sidebar şi reducând extra spaţiul din partea dreapta a logo-ului. În continuare vom vedea cum să adăugăm o casetă de căutare pe bara de navigare în Blogger aşa cum se poate observa cu uşurinţă pe blogul meu.

Înainte de toate eu aş zice să facem o copie de rezervă a şablonului, în cazul în care ceva nu merge cum trebuie să-l putem restabili. Acum trebuie să facem rost de o casetă de căutare. Puteţi să adăugaţi un motor de căutare particularizat sau o casetă de căutare simplă precum cea pe care am ales-o eu. Probabil ştiţi că aşa numita bară de navigare sau meniul orizontal este defapt obiectul gadget "Pagini". Aşadar noi trebuie să implementăm codul html al casetei de căutare în cadrul acestui gadget.

Mergem la Şablon —> Editaţi HTML —> Accesaţi, apoi bifăm "Extindeţi şabloanele control", căutăm (Ctrl+F) "PageList1" pentru a găsi widgetul "Pagini" iar după linia <div class='widget-content'> lipim codul HTML al casetei de căutare:

<div id='searchbox'>
<form action='/search' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text' value=''/>
<input class='button' type='submit' value=''/>
</div>
</form>
</div>

V-am pus la dispoziţie şi un screenshot pentru a prinde ideea mai repede:

Nu uitaţi să "Salvaţi şablonul". Dar asta nu e tot, mai avem de formatat elementul pe care l-am introdus. Mergem la Şablon —> Editaţi HTML —> Personalizaţi —> Avansat —> Adăugaţi CSS şi lipim următorul cod CSS:

#searchbox {
-moz-background-inline-policy:continuous;
background:url("http://4.bp.blogspot.com/_AxdTtBbEEYQ/TJDxH1UGsnI/AAAAAAAAAqQ/IpLW7xXxTvA/s1600/searchbox.png") no-repeat scroll 0 0 transparent;
display:block;
float:right;
height:36px;
margin-right:10px;
margin-top:-5px;
width:208px;
}
#searchbox .textfield {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
border:0 none;
float:left;
height:12px;
margin:10px 1px 10px 8px;
width:140px;
}
#searchbox .button {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
border:0 none;
cursor:pointer;
float:left;
height:30px;
margin-left:2px;
margin-top:6px;
width:30px;
}

"Aplicaţi şablonul în blog" şi bucuraţi-vă de caseta de căutare pe bara de navigare.