Pubblicato il 11/02/15e aggiornato il

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

salva-disposizione-blogger-menu

L'aspetto del menù sarà il seguente

menù-circolare

Si può visualizzare anche la Demo online

demo

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.




7 commenti :

  1. Ciao Ernesto,. ma io li vedo (demo) quadrati! :)

    Grazie

    RispondiElimina
    Risposte
    1. Con che browser? Comunque basta aumentare il raggio di curvatura finché non diventano rotondi da 300 a p. e. 600
      @#

      Elimina
    2. Chrome 41 beta.
      Occhei, grazie :)

      Elimina
  2. Ciao ! Anche questo tool davvero interessante ! Complimenti ! Domanda. Se io volessi fare il bordo di un colore diverso (che poi vado ad inserire dalla tabella colori) dove devo modificare il linguaggio html sopra riportato ? Cioe' qui si puo personalizzare colore testo e colore sfondo, sarebbe possibile personalizzare anche colore bordo esterno ? grazie mille

    RispondiElimina
    Risposte
    1. Il bordo non c'è ma lo puoi mettere. Incolla per esempio questo codice
      border: 2px solid #000;
      subito dopo
      .menucircolare li a{
      Naturalmente puoi personalizzare la dimensione 2px, il colore e lo stile (solid, dotted, dshed, ecc)
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.