REDAZIONE

Ciao Myblogger!

Oggi abbiamo una piccola novità per tutti coloro che hanno optato per l’adozione per di un menù orizzontale. Partendo proprio da quel tutorial - che vi consigliamo di leggere prima di proseguire - vi mostriamo come posizionare il motore di ricerca del vostro blog al suo interno, in fondo a destra, dopo l’ultima voce del menu. Si tratta di fare un po’ d’ordine ed offrire ai vostri lettori un accesso più rapido e efficiente (in termini di usabilità) alla funzione “cerca”.

Il codice del motore di ricerca è il seguente:

  <form action="/search/" method="get" id="searchbodyform" 
  name="searchbodyform" onsubmit="if($('searchbodyforminput')
  .value) document.forms['searchbodyform'].action+=escape 
  ($('searchbodyforminput').value);else return false;" 
  style="width:120px; font-size: 10px; margin-top: -19px; 
  margin-left:700px; z-index: -1;"> <input name="s" 
  value="Cerca" id="searchbodyforminput" 
  type="text" style="width:120px; font-size: 10px;"/> 
  <input src="http://static.myblog.it/backend/images/extras/trova.png" 
  id="searchbodyformbot" type="image" 
  style="margin-top: -22px; margin-left:130px;
  border:0px; background-color:transparent;" /></form>        

 

Dopo averlo copiato, partendo dal pannello di gestione seguiamo  “Presentazione > Opzioni avanzate” e, all’interno delle seguenti pagine (e per tutte le pagine):

 

• Modello della home page

• Modello della pagina categoria

• Modello della pagina dei commenti

• Modello di pagina di Link permanente

• Template tags

 

Rintracciamo la porzione di codice:

 

  <a class=”menu_orizzontale” 
  href="http://NomeDelBlog.myblog.it/NomeCategoria"> 
  Voce del menù</a>        

 

E subito dopo incolliamo il codice del motore di ricerca. Salviamo le modifiche e andiamo subito a vedere il nostro blog con il motore di ricerca posizionato proprio all’interno del nostro menu orizzontale!

 

Come modificare la posizione del motore di ricerca (per utenti esperti)

Nel nostro tutorial, come specificato, abbiamo scelto di posizionare il l’elemento alla fine della barra, ma è possibile pensare ad una sistemazione diversa, magari all’inizio o in mezzo alla barra del menù. Per fare ciò, basta semplicemente incollare il codice del motore di ricerca prima della voce di menu desiderata.

 

Inoltre, qui mostriamo  come inserire il motore di ricerca all’interno di un “template standard”.

Se avete invece  personalizzato il template del vostro Blog, dovrete modificare anche il codice CSS del motore di ricerca per scegliere la posizione, le dimensioni, i colori, etc…

Il foglio di stile del motore di ricerca lo potete editare direttamente nel codice mostrato sopra, modificando i valori dello stile definiti all’interno delle virgolette di ogni:

style=”valori del foglio di stile”

dei singoli elementi che compongono la barra di ricerca.

 

Nell’esempio qui di seguito abbiamo evidenziato in grassetto proprio la sezione su cui intervenire.

  <form action="/search/" method="get" id="searchbodyform" 
  name="searchbodyform" onsubmit="if($('searchbodyforminput')
  .value) document.forms['searchbodyform'].action+=escape 
  ($('searchbodyforminput').value);else return false;" 
  style="width:120px; font-size: 10px; margin-top: -19px; 
  margin-left:700px; z-index: -1;"> 
  <input name="s"   value="Cerca" id="searchbodyforminput" 
  type="text" style="width:120px;  font-size: 10px;"/>        

 

Qui invece, troviamo la sezione su cui intervenire per modificare posizione e dimensione del bottone “Cerca”:

  <input src="http://static.myblog.it/backend/images/extras/trova.png" 
  id="searchbodyformbot" type="image" 
  style="margin-top: -22px; margin-left:130px;
  border:0px;background-color:transparent;" /> </form>