Pubblicato il 20/05/14e aggiornato il

Mostrare una icona accanto al testo nel menù delle Pagine statiche di Blogger.

Come inserire delle immagini a sinistra o a destra delle voci di menù delle pagine statiche di Blogger.
Il menù delle Pagine statiche di Blogger è sicuramente quello più utilizzato dagli utenti vista la semplicità della sua installazione. Ricordo che le voci del menù possono essere formate dai titoli delle pagine ma anche da dei link esterni quali potrebbero essere il Profilo su Twitter o la pagina di Facebook. Per visualizzare il widget del menù delle Pagine bisogna andare su Layout > Aggiungi un gadget > Pagine per poi configurare il widget in cui si possono ordinare le voci delle pagine e selezionare solo quelle che intendiamo mostrare ai lettori.

Vediamo come inserire una icona sulla sinistra di ogni voce per rendere più chiaro il suo significato. In definitiva vogliamo passare da una situazione come questa 

menù-pagine-statiche

a un'altra come la seguente

menù-pagine-con-icone

Per ottenere questo risultato basta andare su Modello > Modifica HTML, cercare la riga ]]></b:skin> con Ctrl+F e subito sopra a questa incollare questo codice

#PageList1 li:nth-child(1):before {
content: url(https://lh5.googleusercontent.com/-ZCsJOk2P980/U3tTTvFGP8I/AAAAAAAAnL4/3sF22OgJf4g/s24-no/home36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(2):before {
content: url(https://lh3.googleusercontent.com/-k5GEqpHKA0w/U3tTAWQNlAI/AAAAAAAAnLw/R0jxHw387o0/s24-no/contattami36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(3):before {
content: url(https://lh3.googleusercontent.com/-DrmsQNHr778/U3tTZMie-8I/AAAAAAAAnMI/b3QX6AB7K4E/s24-no/privacy36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(4):before {
content: url(https://lh5.googleusercontent.com/-TzbthAsyCq0/U3tTdyrFqoI/AAAAAAAAnMQ/2HVq9fWBve0/s24-no/profilo36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(5):before {
content: url(https://lh5.googleusercontent.com/-AnlkbpbQ5z4/U3tTWZoJpPI/AAAAAAAAnMA/V6aJkLpiabQ/s24-no/mappa36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(6):before {
content: url(https://lh4.googleusercontent.com/-wKUOZ9nf3vM/U3tYVu5xLjI/AAAAAAAAnMg/0-Hq4vOoCnE/s24-no/facebook36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}

Si salva il modello. Ho volutamente lasciato gli URL delle icone per testare immediatamente il codice. Il risultato è lo stresso sia con voci di pagine statiche sia con voci di link esterni. Il posizionamento delle icone viene fatto con margin-left:5px; per settare la distanza dalla sinistra, con padding-right: 3px; per distanziare l'icona dal testo del menù e con top: 5px; per la distanza delle icone dall'alto. Per inserire un'altra voce basta aggiungere un settimo blocco di codice 

#PageList1 li:nth-child(7):before {
content: url(URL_IMMAGINE);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}

Volete mostrare le icone sulla destra invece che sulla sinistra?

Il codice da incollare con le stesse modalità allora diventa così

#PageList1 li:nth-child(1):after {
content: url(https://lh5.googleusercontent.com/-ZCsJOk2P980/U3tTTvFGP8I/AAAAAAAAnL4/3sF22OgJf4g/s24-no/home36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(2):after {
content: url(https://lh3.googleusercontent.com/-k5GEqpHKA0w/U3tTAWQNlAI/AAAAAAAAnLw/R0jxHw387o0/s24-no/contattami36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(3):after {
content: url(https://lh3.googleusercontent.com/-DrmsQNHr778/U3tTZMie-8I/AAAAAAAAnMI/b3QX6AB7K4E/s24-no/privacy36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(4):after {
content: url(https://lh5.googleusercontent.com/-TzbthAsyCq0/U3tTdyrFqoI/AAAAAAAAnMQ/2HVq9fWBve0/s24-no/profilo36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(5):after {
content: url(https://lh5.googleusercontent.com/-AnlkbpbQ5z4/U3tTWZoJpPI/AAAAAAAAnMA/V6aJkLpiabQ/s24-no/mappa36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(6):after {
content: url(https://lh4.googleusercontent.com/-wKUOZ9nf3vM/U3tYVu5xLjI/AAAAAAAAnMg/0-Hq4vOoCnE/s24-no/facebook36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}

che dopo il salvataggio del modello produce questo risultato

menù-con-icone-sulla-destra

Anche in questo caso si possono aggiungere altre icone inserendo altri blocchi ordinati

#PageList1 li:nth-child(7):after {
content: url(https://lh4.googleusercontent.com/-wKUOZ9nf3vM/U3tYVu5xLjI/AAAAAAAAnMg/0-Hq4vOoCnE/s24-no/facebook36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}

Le ultime righe servono per il posizionamento delle icone in relazione alle voci del menù.
Fonte | Ciudad Blogger




4 commenti :

  1. Ciao Ernesto sono sempre io... indovina? Nemmeno questo mi riesce. Mi compare la stringa di codice sopra l'intestazione del blog...

    RispondiElimina
    Risposte
    1. Significa che hai copiato male il codice. Basta lasciare un solo carattere e il codice viene interpretato come testo e quindi visualizzato

      Elimina
    2. Ho trovato il punto in cui copiare il codice, ora è di colore blu ma non visualizzo l'icona nel menu. Non è che anche qui c'è un'incompatibilità col modello?

      Elimina
    3. Questo dovrebbe funzionare in tutti i modelli. Hai caricato l'icona in un hosting tipo Picasa? Hai correttamente ricavato il link diretto della immagine? In questo caso dovrebbe funzionare.

      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.