Blogger Book

Spesso sentiamo la necessità di aggiungere icone ai link per identificare meglio il tipo di contenuto a cui rimandano. Nella maggior parte dei menu, questo non rappresenta un problema, poiché è sufficiente aggiungere il codice dell'immagine prima del nome della scheda. Tuttavia, con il gadget Pagine, è un po' più difficile, poiché il codice del gadget non è il tradizionale codice HTML del menu, ma contiene una serie di codici specifici di Blogger. Aggiungere immagini diverse direttamente all'HTML è impossibile.

Ma questo non significa che non possiamo cercare modi alternativi per farlo, ed è esattamente ciò che faremo in questo post: vedremo come inserire un'icona diversa su ogni scheda nel menu Pagine , e per farlo useremo il CSS, in particolare i selettori :nth-child() e ::before.
In questo modo faremo in modo che ciascuna scheda nel nostro gadget Pagine abbia un'icona diversa prima del nome della scheda.

Ottenere quanto sopra è molto più facile di quanto si possa pensare. Basta andare su Template | Modifica HTML e aggiungere quanto segue prima di ]]></b:skin> :

#PageList1 li:nth-child( 1 ):before {
content: url( URL immagine );
padding-right: 5px;
position:relative;
top: 3px;
}
#PageList1 li:nth-child( 2 ):before {
content: url( URL immagine );
padding-right: 5px;
position:relative;
top: 3px;
}
#PageList1 li:nth-child( 3 ):before {
content: url( URL immagine );
padding-right: 5px;
position:relative;
top: 3px;
}
#PageList1 li:nth-child( 4 ):before {
content: url( URL immagine );
padding-right: 5px;
position:relative;
top: 3px;
}

In questi stili CSS vedrai dei numeri, ogni numero rappresenta ogni scheda del tuo menu, dove 1 è la prima scheda, 2 è la seconda, ecc. Tieni presente che la prima scheda è solitamente la Home Page , quindi la seconda scheda appartiene alla prima pagina del tuo menu.

Nel codice devi modificare l'URL dell'immagine dove è indicato in rosso .

La distanza tra l'icona e il testo viene modificata tramite padding-right .

Con top puoi controllare la distanza dall'alto, in modo da poter allineare l'immagine verticalmente. Ho impostato l'icona in modo che si sposti di 3px dall'alto, ma può variare a seconda delle dimensioni dell'icona che inserisci. In questo caso dovrai giocare con il valore top , potendo anche usare un valore negativo per alzare l'immagine, ad esempio -3px.
Il codice è per le prime quattro schede del tuo menu; se hai più schede, aggiungi semplicemente un pezzo di codice come questo per ogni scheda a cui vuoi aggiungere un'icona.

#PageList1 li:nth-child( 5 ):before {
content: url( image URL );
padding-right: 5px;
position:relative;
top: 3px;
}

Per ogni codice aggiunto, dovrai sostituire il numero 5 con quello corrispondente: 6 , 7 , 8 , ecc.
È semplicissimo personalizzare ulteriormente il gadget Pagine utilizzando icone che aiutano a riconoscere visivamente le schede.

fonte