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 

a un'altra come la seguente

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwso8Bep3qTot4yZZynN1N4HmUd2u8vZ0B7RZZnBxh2OpQXhcN7I-CQDmCV5Ulom3dzFRuft9IjZnMJAR1jc-b4aQ3nG7iBclW80O-uyq5n0z3N0u3QFQBNyfmLZRBtl5dCMlEAplFbrI/s24-no/home36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(2):before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkf7g7drw1NPE2Xl1IeckMlCcTGdUNyHvIZ05lDMYnWdcz3C5Vr8X405qnsMBICPx1O_jN8rSDS52BFbNZE0d6CALKZ9aqtTy-Q9ntCNzrgRRuggw1kH3Onbdq9zwzqw64_SZvMfvrj1o/s24-no/contattami36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(3):before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4azfSlSeXF9SKGzJKkvbKYBO2pXf9kD7EheWF9c3f-_ywhIgDKxP66nt0emf1BjfIfNcvsWc2BkI0YfJeZqWO7oGGP5Y2Pf8blzjhQA5xyYTFbWxFPbfBFNWErcxvzVeX8Q5WF2YwgEY/s24-no/privacy36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(4):before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxdX9nBjjI_mPpS_Ta-jhYEI8c8ZwYqhsONYfNlEi-dqJYWdpNBahGxUbl-2lT-cA-vKxh8XSvzqOTGYV4Zizokn5yBvLdybR0nOfiYqH7LzY-E6WRcTIBa4pDr55kEAtTEjTkSYMBu0/s24-no/profilo36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(5):before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eCWOE9d1YbQixqYZn-APR8a8lmJs-sA6MjOHV1aWmj41ZECeXUeP-ejv5XIoGRfdFeLXaNGHNhqw6s58uEvF95fzGTsenOy7Cd_y6glfZLRrQRm_by0WqBCnC2WXGS2bYQcZGD9T8vc/s24-no/mappa36.png);
margin-left:5px;
padding-right: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(6):before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi34VCk_dhU3MssalwGIrQjcdk4uSAWuTJQnyvpeAhLE2dfMjA7J_1brPnrKForA-kAUd50UnuLBwjqoagpFS4qof0Ium-lntUZmjjRDhrx60JQc5RBJTrtvt5B_eSV9cXi0AvNxOuTIrU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwso8Bep3qTot4yZZynN1N4HmUd2u8vZ0B7RZZnBxh2OpQXhcN7I-CQDmCV5Ulom3dzFRuft9IjZnMJAR1jc-b4aQ3nG7iBclW80O-uyq5n0z3N0u3QFQBNyfmLZRBtl5dCMlEAplFbrI/s24-no/home36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(2):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkf7g7drw1NPE2Xl1IeckMlCcTGdUNyHvIZ05lDMYnWdcz3C5Vr8X405qnsMBICPx1O_jN8rSDS52BFbNZE0d6CALKZ9aqtTy-Q9ntCNzrgRRuggw1kH3Onbdq9zwzqw64_SZvMfvrj1o/s24-no/contattami36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(3):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4azfSlSeXF9SKGzJKkvbKYBO2pXf9kD7EheWF9c3f-_ywhIgDKxP66nt0emf1BjfIfNcvsWc2BkI0YfJeZqWO7oGGP5Y2Pf8blzjhQA5xyYTFbWxFPbfBFNWErcxvzVeX8Q5WF2YwgEY/s24-no/privacy36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(4):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxdX9nBjjI_mPpS_Ta-jhYEI8c8ZwYqhsONYfNlEi-dqJYWdpNBahGxUbl-2lT-cA-vKxh8XSvzqOTGYV4Zizokn5yBvLdybR0nOfiYqH7LzY-E6WRcTIBa4pDr55kEAtTEjTkSYMBu0/s24-no/profilo36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(5):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eCWOE9d1YbQixqYZn-APR8a8lmJs-sA6MjOHV1aWmj41ZECeXUeP-ejv5XIoGRfdFeLXaNGHNhqw6s58uEvF95fzGTsenOy7Cd_y6glfZLRrQRm_by0WqBCnC2WXGS2bYQcZGD9T8vc/s24-no/mappa36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}
#PageList1 li:nth-child(6):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi34VCk_dhU3MssalwGIrQjcdk4uSAWuTJQnyvpeAhLE2dfMjA7J_1brPnrKForA-kAUd50UnuLBwjqoagpFS4qof0Ium-lntUZmjjRDhrx60JQc5RBJTrtvt5B_eSV9cXi0AvNxOuTIrU/s24-no/facebook36.png);
margin-right:5px;
padding-left: 3px;
position: relative;
top: 5px;
}

che dopo il salvataggio del modello produce questo risultato

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

#PageList1 li:nth-child(7):after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi34VCk_dhU3MssalwGIrQjcdk4uSAWuTJQnyvpeAhLE2dfMjA7J_1brPnrKForA-kAUd50UnuLBwjqoagpFS4qof0Ium-lntUZmjjRDhrx60JQc5RBJTrtvt5B_eSV9cXi0AvNxOuTIrU/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