Inserire menu di navigazione effetto gel-candy su Blogger

Oggi aggiungeremo un menu troppo carino che ho trovato nel sito Dynamic Drive, sperando di accontentare la richiesta di Titti, in questo caso si tratta di un effetto gel, che l’autore chiama Lava-lamp! Per farvene un’idea cliccate qui.

Difficoltà: medio-alta per chi è alle prime armi. Consiglio: occorre soltanto seguire con attenzione tutti gli step 😉

Risultato finale menu di navigazione gel-candy

Cosa occorre:
casella di posta elettronica;
– registrazione ad un servizio host immagini
registrazione ad un servizio host per file java.

Scaricare i file delle immagini dei bottoni e creazione dei link.
Creare i file dello script e caricarli su un hosting java.

NOTA IMPORTANTE: Salvate il vostro template da DESIGN > MODIFICA HTML > SCARICA MODELLO COMPLETO

Step 1PRELEVARE LE IMMAGINI DEI BOTTONI
Per prendere le immagini, cliccate qui, salverete tutti i bottoni di diversi colori per creare il nostro menu. Una volta decompresso il file zip, potete scegliere il colore dei bottoni che più si intona con il vostro template. Devo dirvi che il menu viene bene su sfondo bianco, se siete puntigliosi e volete avere un risultato perfetto!
Per ogni colore avrete un “gelbuttonright; gelbuttonleft e gel buttoncenter”, con un numero finale che identifica il colore, io ho scelto i tre bottoni rosati con il numero finale “3”.

Ora accedete al vostro account di Photobucket o Imageshack (che non necessita di registrazione, entrambi sono gratuiti) e caricate nel host le immagini dei bottoni…
Quando dovete dare il nome ai vostri files salvati, rinominateli allo stesso modo così da non sbagliare dopo quando dovremo inserirli nel codice css.

Se non sapete come fare per ottenere un link diretto di un’immagine, potete leggere il mio mini-tut!

STEP 2 – INSERIRE IL CODICE CSS e IL LINK DEI BOTTONI
Loggatevi a Blogger, nel vostro amato bloggeruccio e andate nel menu
DESIGN > DESIGNER MODELLI > AVANZATO e dal menu a tendina scorrete fino in fondo su AGGIUNGI CSS.

Nel box che si apre dovete incollare il codice Css del menu (cliccate sulla parola per poterlo copiare).
Vi metto il codice qui sotto, le parole evidenziate in rosa sono da sostituire con i link diretti delle immagini che avete ottenuto nello step 2. State attenti a inserire il link esatto del set di colore che avete scelto.
Ad esempio se aveste scelto il set rosato, al posto di –gelbuttonleft.gif = >dovrete inserire  il link  di photobucket tipo

=>www.photobucket.com/vostronome/gelbuttonleft3.gif/.
E via così per gli altri due bottoni: tutto chiaro!?!

/* ######### Gel Menu CSS ######### */ da Dynamicdrive.com

ul.gelbuttonmenu{
position:relative;
padding: 0;
margin: 0;
margin-bottom:1em;
text-align: center; //set value to "left", "center", or "right"*/
}

ul.gelbuttonmenu li{
display: inline;
}

ul.gelbuttonmenu li a{
color: black;
font-weight:bold;
padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}

ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
background:lightblue;
background:url(gelbuttonleft.gif) top left no-repeat, url(gelbuttonright.gif) top right no-repeat, url(gelbuttoncenter.gif) top center repeat-x;
}
/* ######### Solid Block Menu CSS ######### */
ul.solidblockmenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.solidblockmenu li{
display: inline;
}
ul.solidblockmenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}
ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
-moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
background:#d7ed93;
background: -moz-linear-gradient(top, #d7ed93, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));
background: linear-gradient(top, #d7ed93, #fff);
}
/* ######### Thick Underline Menu CSS ######### */
ul.underlinemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.underlinemenu li{
display: inline;
}
ul.underlinemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}

ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border-bottom:5px solid navy;
}
/* ######### Frame Menu CSS ######### */
ul.framemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.framemenu li{
display: inline;
}
ul.framemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 12px 10px 5px 18px;
margin-right: 10px; /*spacing between each menu link*/
text-decoration: none;
}
ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:4px solid orange;
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
box-shadow: 0 0 4px rgba(120,120,120,0.7);
}

STEP 4 – Cliccate su APPLICA AL BLOG per salvare le modifiche.
STEP 5AGGIUNGERE IL CODICE HTML DEL MENU
Cliccate su TORNA A BLOGGER , cliccate su DESIGN > ELEMENTI PAGINA  > MODIFICA.

Sotto la header – testata del vostro blog, dovrebbe esserci la possibilità di aggiungere un gadget, se non c’è leggete nel fondo del tut sulle note.

Dove aggiungere Codice html per semplice menu

Ora bisogna aggiungere un modello semplice di MENU, molti di voi mi chiedono perché non riescono poi ad andare nelle pagine, se non avete scritto nessun posts è logico che non ci siano i collegamenti. Dovete creare i post e poi copiare il link per collegare il tutto. Ma andiamo con calma… Eh eh!

Un semplice modello di codice html per creare il menu. Prima dovete creare tutti i post delle voci di menu, perciò un post per la voce Contatti, uno per la voce About me e infine uno per la voce Portfolio. Pubblicarli e copiare l’url del post dal browser… Ok!? L’url va poi collocato al posto della riga in rosa, io ne ho messo uno di esempio per farvi capire meglio.

Naturalmente voi potete inserire le voci che preferite…

<ul id=”gooeymenu1″ class=”gelbuttonmenu”>
<li><a href=”http://www.nomevostroblog.blogspot.com/“>Home</a></li>
<li><a href=”http://www.nomevostroblog.com/contatti/“>Contatti</a></li>
<li><a href=”http://nomevostroblog.blogspot.com/2011/06/Aboutme.html“>About me</a></li>
<li><a href=”http://nomevostroblog.blogspot.com/2011/06/Porfolio“>Portfolio</a></li>
</ul>
<script>
gooeymenu.setup({id:’gooeymenu1′, selectitem:1})
</script>

Una volta incollato, cliccate su SALVA.

NOTA: per fare in modo che si sia la possibilità di aggiungere un gadget sotto la testata, procedete come segue:
Andate su DESIGN > MODIFICA HTML e
cercate questo pezzetto di codice “ELEMENT“, dovete visualizzare il seguente codice,  e cambiare le parti in rosa con quello che ho scritto io:

<b:section class=’header’ id=’header’ maxwidgets=’5‘ showaddelement=’yes‘>
<b:widget id=’Header1′ locked=’true‘ title=’Blogghi test (Intestazione)’ type=’Header’>
Ora salvate il template. Controllate se si è materializzato AGGIUNGI GADGET come da figura step 5.

Per proseguire la lettura… cliccate su CONTINUA TUT INSERIRE MENU NAVIGAZIONE

 

Spread the love

Leave a Reply

This blog is kept spam free by WP-SpamFree.