Menù circolare per Blogger con effetto hover.

Come installare un menù formato da cerchi colorati con collegamenti a pagine del blog su Blogger o con link esterni a social o ad altre pagine.

L'effetto hover è quello semplicissimo che è provocato dal cursore quando passa sopra a un elemento e che ne muta l'aspetto. Il menù che vado a proporre ha la particolarità di avere delle icone circolari con collegamenti a post del sito o a pagine esterne. Quando ci si passa sopra con il mouse cambia il colore di sfondo e il colore del testo dello stesso menù.

Ovviamente si può agire sui codici dei colori per sceglierli in tono con i colori del nostro blog. È anche possibile modificare le dimensioni dei cerchi e aggiungere nuove voci o togliere quelle proposte. La sua installazione è decisamente semplice visto che non occorre neppure modificare il modello.

Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla questo codice

<style>
.menucircolare {
width: 100%; /* Larghezza */
}
.menucircolare ul{
margin: 0;
padding: 0;
font: bold 14px Georgia; /* Famiglia di font */
list-style-type: none;
text-align: center; /* Testo centrato */
}
.menucircolare li{
display: inline;
margin: 0;
}
.menucircolare li a{
display:inline-block;
text-align:center; /* Testo centrato */
text-decoration: none;
color: #fff !important; /* Colore del testo */
font-weight:bold !important; /* Grassetto */
background:#0291b3; /* Colore di sfondo */
margin: 0;
margin-right:10px; /* Spazio separazione tra cerchi */
width:85px; /* Larghezza cerchi */
height:85px; /* Altezza Cerchi */
border-radius: 300px; /* Arrotondamento */
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
}
.menucircolare li a:hover{
color: #968ef4 !important; /* Colore del testo con il mouse */
background:#910ebf !important; /* Colore di sfondo con il mouse */
}
.menucircolare a span{
position:relative;
top:40%;
}
</style>
<div class="menucircolare">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Televisione</span></a></li>
<li><a href="#"><span>Giochi</span></a></li>
<li><a href="#"><span>Audio</span></a></li>
<li><a href="#"><span>Foto</span></a></li>
<li><a href="#"><span>Video</span></a></li>
<li><a href="#"><span>Contattami</span></a></li>
</ul>
</div>

Si salva e si posiziona con il trascinamento del mouse sopra all'area del post o sotto l'intestazione. Successivamente si va in alto a destra su Salva disposizione. 

L'aspetto del menù sarà il seguente



Si può visualizzare anche la Demo online

Nel codice sono stati colorati di rosso i parametri più importanti da personalizzare. Accanto a ciascuno è anche visibile un commento che ne indica il campo di azione. I link ai cerchi del menù devono essere sostituiti ai cancelletti  ( # )nella parte finale del codice. Si possono modificare il nome delle voci del menù e aggiungerne anche altre mantenendo la stessa sintassi.