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:
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.
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-->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:
<link href='https://sites.google.com/site/scuolissima1/home/archivio/menu-azzurro-ghiaccio.css' rel='stylesheet' type='text/css'/>
<!--Menù Azzurro Ghiaccio Fine-->
<div id="menuazgh">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.
<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>
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.
