Casella di ricerca dentro il menu di Blogger


Se avete già letto il mio articolo correlato su come inserire un motore di ricerca per blog, avrete sicuramente provato a posizionarne uno nella sidebar. Di solito si adattano abbastanza bene ma in alcuni blog sta alquanto brutto da un punto di vista estetico, comunque è anche sconveniente occupare la parte alta della sidebar con cose superflue se avete intenzione di monetizzare tramite i programmi di affiliazione.
In questo post ho intenzione di spiegarvi come poter inserire una casella di ricerca all'interno del menu di Blogger, non in quello classico ma in uno realizzato con l'HTML che funziona anche con altri browser.


Andate su Modello > Modifica HTML, cercate la riga </head> e subito prima incollate il seguente codice:
<!--Menù Azzurro Ghiaccio Inizio-->
<link href='https://sites.google.com/site/scuolissima1/home/archivio/menu-azzurro-ghiaccio.css' rel='stylesheet' type='text/css'/>
<!--Menù Azzurro Ghiaccio Fine-->
Adesso Salvate il modello, recatevi su Layout e nella zona alta, nel punto in cui volete far apparire il menù (di solito di usa trascinarlo sotto l'header) incollate questo codice HTML:
<div id="menuazgh">
<ul>
<li><a href="URL PAGINA 1">TITOLO 1</a></li>
<li><a href="URL PAGINA 2">TITOLO 2</a></li>
<li><a href="URL PAGINA 3">TITOLO 3</a></li>
<li><a href="URL PAGINA 4">TITOLO 4</a></li>
<li><a href="URL PAGINA 5">TITOLO 5</a></li>
<li><a href="URL PAGINA 6">TITOLO 6</a></li>
<li class="menucerca1"><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="menucerca1" name="q" type="text"/><input id="menucerca2" value="Cerca" type="submit"/></form></li>
</ul>
</div>
Adesso non vi resta altro da fare che inserire i link dei post o delle pagine e il nome con cui volete farla apparire nel vostro blog. E' possibile inserire ulteriori campi o diminuirli ma conviene non modificarlo più di tanto altrimenti si vedrà distorto.

Se quando andate a selezionare le pagine del menù queste appaiono di un colore bianco che rende illeggibile il testo andate sul modello e cercate .widget li a:hover e controllate che ci sia impostato il valore none su background in questo modo: background-color: none;

Nota Bene: I più esperti possono anche scaricare il file CSS presente nel primo codice, personalizzarlo a proprio piacimento e caricarlo sul proprio account Google Sites.


4 comments :

  1. la casella di ricerca si sposta, ma il resto rimane al suo posto (spazio vuoto con il titolo del widget), come posso fare?

    RispondiElimina
    Risposte
    1. Purtroppo prima funzionava anche come nella spiegazione poi coi vari aggiornamenti blogger ha peccato in grafica.
      Come puoi notare io ho optato per una casella di ricerca nella sidebar perché si spostava a seconda del browser scelto (firefox, chrome, explorer)avevo fatto numerosi tentativi ma il risultato era sempre negativo. Per averla posizionata nel menu o accanto al logo l'unica soluzione e cercarti un tema diverso da quelli standard di blogger purtroppo.

      Elimina
    2. ok grazie lo stesso Andrea. Anch'io lotto come te fra le visualizzazioni diverse che mi danno i 3 browser. A volte c'è da uscire veramente matti e questo influisce negativamente sul tempo che ho da spendere per i contenuti.

      Elimina
    3. Ho modificato la guida, adesso in questo menù la casella di ricerca funziona bene.

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail.


© Scuolissima.com - appunti di scuola online! © 2021, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies