REDAZIONE

Cari MyBlogger,

in questo tutorial vi mostriamo come personalizzare il Search Box all’interno della colonna del vostro blog. In particolare come trasformarlo da cosi a cosi:

Abbiamo effettuato solo due modifiche:

1. allargato l’area in cui inserire la ricerca;
2. centrato il Search Box rispetto la colonna (in questo caso abbiamo utilizzato un blog con una sola colonna laterale da 300 pixel).

Andiamo in “Presentazione > Contenuto delle barre laterali di navigazione” e clicchiamo sul link “Aggiungi un testo” che troviamo nello spazio dedicato ai widget in fondo alla pagina.

Nella finestra che si apre diamo un nome all’oggetto, ma non rendiamolo visibile, e all’interno dello spazio riservato al “Contenuto dell’oggetto” incolliamo questo codice.

  <form action="/search/" method="get" id="searchbodyform" 
  name="searchbodyform" style="padding:0;margin:0;" 
  onsubmit="if($('searchbodyforminput').value) document.forms
  ['searchbodyform'].action+=escape($('searchbodyforminput')
  .value);else return false;">
  <input name="s" value="Cerca in Redazione..." 
  id="searchbodyforminput" type="text" style="width:180px;"/>
  <input src="http://static.myblog.it/backend/images/extras/trova.png" 
  id="searchbodyformbot" type="image" style="margin-left:5px;
  vertical-align:middle;border:0px;background-color:transparent;" />
  </form>  

In particolare, per personalizzare la lunghezza del campo in cui si effettua la ricerca, a seconda che utilizziate la colonna da 300px o quella da 150px, dovete modificare alcuni attributi presenti in questo codice:

  <input name="s" value="Cerca in Redazione..." 
  id="searchbodyforminput" type="text" style="width:180px;"/>  

All’interno di “value” potete sostituire “Cerca in Redazione…” con un vostro testo personalizzato e potete sostituire il valore di “width”  con un valore in pixel che ritenete più opportuno per il vostro template.
Noi abbiamo inserito “180px” perché in questo modo, all’interno di una colonna di 300px, il Search Box viene posizionato esattamente al centro ed allineato con gli altri elementi che abbiamo inserito in colonna.

Il lavoro è finito. Salvate il nuovo elemento creato e pubblicatelo in una delle vostre colonne del blog.
Ah! Se non lo avete già fatto, ricordatevi di disattivare la widget standard denominata “Search Box” che trovate sempre all’interno di “Presentazione > Contenuto delle colonne laterali di navigazione”!