Questo menù ha la particolarità di avere, oltre alle voci, anche una sezione dedicata alla ricerca di articoli interni al blog inserendo delle opportune keyword. Ho pubblicato una demo nel web e potete visualizzarlo direttamente
L'aspetto è visibile anche in questo screenshot. Non ho inserito collegamenti attivi ma il suo funzionamento è intuibile
Il colore di base è il grigio che diventa azzurro quando si punta un elemento con il mouse. I colori sono dati da una immagine quindi non possono essere cambiati senza modificare quest'ultima. Cosa comunque fattibilissima. Per l'installazione andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice
<!--Menù Azzurro Ghiaccio Inizio-->
<link href='https://sites.google.com/site/scriptperilblog/javascript-2/menu-azzurro-ghiaccio.css' rel='stylesheet' type='text/css'/>
<!--Menù Azzurro Ghiaccio Fine - www.ideepercomputeredinternet.com-->
Salvate il modello. Adesso create il vostro menù con il nome delle voci e i relativi collegamenti. Deve avere questa struttura
<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>
Dopo averlo configurato con i vostri dati, andate su Design > Aggiungi un gadget > HTML/Javascript e incollate il codice in Sezioni del sito. Trascinandolo con il mouse posizionatelo subito sotto all'header del vostro blog. Salvate ancora una volta il modello.
In URL PAGINA X si inserisce l'indirizzo del collegamento a un post, a una etichetta o anche a un sito esterno. In TITOLO X va messo il testo che si vuole visualizzare mentre Cerca è quello che si vede nella sezione di ricerca. Se volete che una pagina si apra in un'altra scheda del browser, aggiungete un nuovo tag con questa struttura
<li><a href="URL PAGINA X" target="_blank">TITOLO X</a></li>
Si possono inserire un numero inferiori di voci semplicemente eliminando una linea oppure si possono aggiungere altre voci aggiungendo righe con la stessa sintassi. La sezione di ricerca può anche essere messa all'inizio del menù oppure in una posizione centrale semplicemente spostando gli elementi
Accorgimenti
Se avete un nuovo modello costruito con il Designer Modelli, vi può capitare di visualizzare gli elementi del menù come tutti bianchi quando vengono puntati con il mouse. Non dipende dal codice del menù ma da quello del vostro template. Si può facilmente ovviare cercando in Design > Modifica HTML la classe determinata da .widget li a:hover e che fissa l'aspetto degli elenchi nei widget. Ecco uno screenshot
In background o background-color sostituite il valore presente nel template con none;. Salvate prima il modello per poter eventualmente tornare sui vostri passi.
Coloro che volessero personalizzare ulteriormente il menù cambiandogli i colori possono scaricare questo file css, aprirlo con Notepad++ e sostituire l'immagine con un'altra. Se siete esperti di grafica, aprite l'immagine PNG con un qualsiasi programma e cambiate i colori della texture, salvatela, caricatela su un hosting tipo Picasa o Skydrive, acquisitene l'indirizzo e sostituitelo a quello del file CSS. Salvate il file e caricatelo su Google Sites con la modalità Schedario; acquisite l'URL del file e incollatelo al posto di https://sites.google.com/site/scriptperilblog/javascript-2/menu-azzurro-ghiaccio.css nella parte di codice che va nella sezione <head>.
Quando effettuate una ricerca con la casella di questo menù, saranno visualizzati gli ultimi post che hanno al loro interno la query immessa
Altri menù interessanti
Bella Parsi. :)
RispondiEliminaPer eliminare la casella di ricerca basta solo cancellare la parte del codice?
Ciao.
interessante... ma le sottovoci non si possono mettere?
RispondiElimina@LeNny
RispondiEliminaSì, per eliminare la parte relativa alla ricerca togli le due righe in cui c'è "menucerca"
@Soffio di Dea
Tu hai la fissa di queste "sottovoci" :D I menù i cui si possono mettere sono il Chrome (che ho io) e quello multilivello. Se ne trovo altri li pubblico...
ahahah hai ragione scusami... questo cmnq mi sarà utilissimo ^_^ grazie
RispondiEliminaperfetto, grazie mille.
RispondiEliminaok grazie ho aggiunto solo la barra di ricerca come potete vedere http://vipaddress.blogspot.com
RispondiEliminaciao parsifal
Molto carina anche da sola
RispondiEliminaSto elaborando questo menu e sta venendo una cosa molto carina che poi vedrai. In sostanza ho lasciato la casella ricerca, ma al posto delle voci menu sto inserendo le incone dei social network. Non so se tu abbia già scritto un articolo a riguardo... in caso contrario potrebbe essere uno spunto nuovo. Grazie sempre mille volte perché senza di te non riuscirei mai. Kiss
RispondiElimina@SoffioDiDea
EliminaCome ti piace cambiare sempre tutto e ricominciare da capo :D Sicuramente farai un ottimo lavoro :)
Grazie... ma il merito è di entrambi perché tu mi dai gli strumenti giusti :) diciamo che non sopporto più il mio periodo "dark" dell'inverno scorso e ora voglio la "luce" ^_^
Elimina@soffiodidea
RispondiEliminaSei una vera artista. Sei passata dal periodo blu al periodo rosa come Picasso :D
ahahahahah pensavo lo stesso... tra un po' inizierò a dipingere unghie "sconnesse" ^_^
EliminaCiao, innanzitutto complimenti e grazie di tutto....ma avrei una domandina, come mai quando inserisco il widget nell'header, visulaiizando poi la home page, non mi si posiziona perfettamente sulla destra ma ha una specie di rientro? Ho provato a mastruzzare qua e la ma, anche nel file css, ma non trovo nulla nemmeno nelle eventuali impostazioni nidificate.
RispondiEliminapraticamente mi viene cosi...(demo del sito)... vgiocare1.blogspot.it
RispondiElimina@# Prova a mettere meno elementi. Vedo che hai 5 Titolo6. Prova con uno e poi eventualmente aggiungine altri. In questo modo la casella di ricerca non c'entra e "va a capo"
Eliminaah ops...stavo sperimentando, ma anche togliendo elementi rimane una sorta di rientro sia a sx che a dx. Sembrerebbe prendere una centratura da qualche parte...
Elimina@# Prova a incollare questo codice
Elimina#HTML8 {margin-left:-50px !important}
subito sopra alla riga che determina la fine dei CSS cioè quella in cui c'è /b:skin
Se poi il menù lo metti in un altro blog devi ritrovare l'ID del widget che in linea di massima non sarà più HTML8. Ho messo un rientro di 50 pixel ma puoi calibrarlo come vuoi
P.S. Non ho testato e quindi non so se funzionerà