Blogger Book

Sebbene i modelli di Visualizzazione Dinamica non siano personalizzabili al 100%, alcuni preferiscono usarli per la visualizzazione dei post. E sebbene non possano essere completamente personalizzati, ci sono alcuni aspetti che possiamo modificare. In questo caso, vedremo come modificare le icone per i gadget della barra laterale .

Le icone originali di questi modelli sono bianche e molto semplici. Non c'è niente di male in questo, ma molti potrebbero voler aggiungere icone più in linea con il tema del blog o con i gusti dell'autore. Vediamo quindi come modificarle.

Ricordi il post sull'aggiunta di icone al gadget Pagine ? Beh, il metodo è lo stesso: useremo il selettore :nth-of-type per trovare il gadget della barra laterale e sostituirne l'immagine.

Tutto quello che devi fare è andare su Modello | Personalizza | Avanzate | Aggiungi CSS e aggiungere quanto segue:

.ss, #gadget-dock > div:n-esimo-di-tipo(1) .gadget-icons img,
.ss, #gadget-dock > div:n-esimo-di-tipo(2) .gadget-icons img, .ss, #gadget-dock > div:n-esimo-di-tipo(3) .gadget-icons img, .ss, #gadget-dock > div:n-esimo-di-tipo(4) .gadget-icons img, .ss, #gadget-dock > div:n-esimo-di-tipo(5) .gadget-icons img, .ss, #gadget-dock > div:n-esimo-di-tipo(6) .gadget-icons img, .ss, #gadget-dock > div:n-esimo-di-tipo(7) .gadget-icons img, .ss, #gadget-dock > div:nth-of-type(8) .gadget-icons img, .ss, #gadget-dock > div:nth-of-type(9) .gadget-icons img, .ss, #gadget-dock > div:nth-of-type(10) .gadget-icons img { display: none !important; } #gadget-dock > div:nth-of-type( 1 ) .gadget-icons { background: url( URL immagine ) no-repeat center !important; } #gadget-dock > div:nth-of-type( 2 ) .gadget-icons { background: url( URL immagine ) no-repeat center !important; } #gadget-dock > div:nth-of-type( 3 ) .gadget-icons { sfondo: url( URL immagine ) no-repeat center !important; } #gadget-dock > div:nth-of-type( 4 ) .gadget-icons { sfondo: url( URL immagine ) no-repeat center !important; }

Devi solo inserire gli URL delle immagini dove indicato. Il primo URL corrisponde all'immagine del primo gadget, il secondo all'immagine del secondo gadget e così via.

Il codice è predisposto per i primi quattro gadget nella barra laterale; se ne hai altri, aggiungi semplicemente uno snippet come questo per ogni gadget aggiuntivo:

#gadget-dock > div:nth-of-type( 5 ) .gadget-icons {
background: url( URL immagine ) no-repeat center !important;
}

Questo sarà per il quinto gadget, se ne avessi un sesto aggiungi un altro frammento identico e cambia il 5 in 6 , ecc.

TRUCCO EXTRA
Se vuoi che la barra laterale sia sempre visibile, aggiungi questo codice:

#gadget-dock {
destra: 0!importante;
}

Come puoi vedere, cambiare le icone nelle Viste Dinamiche non è affatto difficile, e la parte migliore è che non dobbiamo armeggiare con l'HTML; possiamo fare tutto con i CSS.

Cambiare le icone dei gadget ci offre l'opportunità di avere un blog più personalizzato e unico, non credi?

fonte