Scuolissima.com - Logo

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.



🧞 Continua a leggere su Scuolissima.com
Cerca appunti o informazioni su uno specifico argomento. Il nostro genio li troverà per te.




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

Policy Privacy - Cambia Impostazioni Cookies