Come personalizzare le icone dei widget nei blog di Blogger a Visualizzazione Dinamica.

Personalizzare le icone dei widget dei blog a Visualizzazione Dinamica su Blogger.

Continuo sulla falsariga degli ultimi due post in cui ho illustrato due widget specifici per i siti su piattaforma Blogger con i template Dynamic Views. Il widget per la sottoscrizione del Canale su Youtube e quello del Like Box di Facebook vengono installati entrambi andando su Layout > Aggiungi un gadget > Testo. Come è noto i widget aggiunti ai blog a Visualizzazione Dinamica vengono visualizzati in una sidebar a scorrimento situata nella parte destra del layout. Ciascun gadget è rappresentato da una specifica icona. Se per esempio avessimo installato i due widget con Testo, questi saranno visualizzati nello stesso modo prima che siano aperti con il cursore.

L'obiettivo di questo post sarà quello di passare dalla visualizzazione anonima dello screenshot di sinistra a una più personalizzabile con icone diverse per ciascun widget dello screenshot di destra

Naturalmente ciascuna icona può essere scelta a piacimento in funzione del tipo di widget che rappresenta. Basterà caricare le immagini su Picasa e ottenerne il link diretto. Questa modifica verrà fatta usando il linguaggio CSS, segnatamente il CSS3, e quindi funzionerà solo con i browser supportano questa tecnologia. I fogli di stile di ciascuna icona sono funzione della posizione che ha nella sidebar scorrevole. Si va su Modello > Personalizza > Avanzato > Aggiungi CSS e sulla destra si incolla

.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(6) .gadget-icons img{
display: none !important;
}
#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBLHj5Nt0Meor1PEUe9ParsemNlEsEd9NCIOOHXgTIlQ-KTMJAreHTpUVSLvKjNk-MjELI5aXgXK9Cot-o3spbunmlVQ0L0sHtnnUjApPNAaNp9nckfuZ1ab526NDRI0RRpQipqonmY8/s50/facebook-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYEqlZgD-cyoLVpojZ097fP6LVxxFJTDmtZAVwVzCjpLlZaqP5RDkqTW7nT2tIrriBdGm229PUSr_yvr51CPbLpU4IR_iOT2A6KGxLJJvCv1_c2JyrHM14fI0CgZEKAMabwsMBqdMn34/s50/youtube-icon.jpg) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOtAowQY6YeM0xZcRvLrshLf2AskeoNoLoO_uNnUGYHddGwiqNs34pUdA8c3DTXTvHtBNKerS6VQ3dn6QGQXbPWqhn-PJPKJGOSm7_wFkmLxxf2GkR1-azUorw7oGh5Bsaped7CvA5-vI/s50/statistic-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6K5zyQlEZ9masWtL-ZwJX8gW4k2zT2B-x4rinlUcCjZgjmnWqFkqJHYLiC4U57h_zn9_CnKJ9CuU_LLK-sDXCpzhDVtWulNnZhTrIR5nCzykikpcTePK1QELHolkUnNa-M3kVfHAvIGY/s50/translate-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbVCF7DOSmF4hTXDByOQgysSxqCtskn_0Avr_NgNKMZkfvilkSBFY3rFaMuZ0hBYDtrq_srMiYMGqa2pz3RX6G0jTL3gomy7x6TuusqOgvro6K18PyF_JABlVvm6ubfH6dDmB1D86EuQ/s50/google-plus-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(6) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyynudgLfph6Rlb_iSUnMLbxDECyQ8PK4O9mGtejaY48CEQVM-K7LKwdDAgFIiRoX2hXF5_rEkXUTXKCfPqCo_kUb8aiGaljbsTHJS-lK7Y2u8DU4apdwkAMUWsrPf-BBPdKhJhKuVGw/s50/1-icon.png) no-repeat center !important;
}

Si posiziona il cursore dopo l'ultima parentesi graffa e si clicca su Invio. Successivamente si va su Applica al blog per rendere effettive le modifiche. Il codice proposto serve per modificare le prime 6 icone della sidebar e ciascuna immagine il cui URL venga incollato al posto di quelli colorati di rosso deve essere quadrata. La dimensione di 50 pixel di lato può essere ottenuta modificando l'indirizzo e inserendo s50 al posto di un altro possibile valore.

Prendiamo adesso in considerazione la possibilità che si voglia lasciare delle icone di default di Blogger e che se ne voglia modificare solo qualcuna. Come detto i fogli di stile sono numerati a seconda della posizione. Nella demo che ho messo online sono state modificate le prime 6 icone, sono state lasciate invariate la settima e l'ottava mentre è stata modificata la nona. Il codice utilizzato è il seguente

.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(6) .gadget-icons img,.ss, #gadget-dock>div:nth-of-type(9) .gadget-icons img{
display: none !important;
}
#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBLHj5Nt0Meor1PEUe9ParsemNlEsEd9NCIOOHXgTIlQ-KTMJAreHTpUVSLvKjNk-MjELI5aXgXK9Cot-o3spbunmlVQ0L0sHtnnUjApPNAaNp9nckfuZ1ab526NDRI0RRpQipqonmY8/s50/facebook-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYEqlZgD-cyoLVpojZ097fP6LVxxFJTDmtZAVwVzCjpLlZaqP5RDkqTW7nT2tIrriBdGm229PUSr_yvr51CPbLpU4IR_iOT2A6KGxLJJvCv1_c2JyrHM14fI0CgZEKAMabwsMBqdMn34/s50/youtube-icon.jpg) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOtAowQY6YeM0xZcRvLrshLf2AskeoNoLoO_uNnUGYHddGwiqNs34pUdA8c3DTXTvHtBNKerS6VQ3dn6QGQXbPWqhn-PJPKJGOSm7_wFkmLxxf2GkR1-azUorw7oGh5Bsaped7CvA5-vI/s50/statistic-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6K5zyQlEZ9masWtL-ZwJX8gW4k2zT2B-x4rinlUcCjZgjmnWqFkqJHYLiC4U57h_zn9_CnKJ9CuU_LLK-sDXCpzhDVtWulNnZhTrIR5nCzykikpcTePK1QELHolkUnNa-M3kVfHAvIGY/s50/translate-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbVCF7DOSmF4hTXDByOQgysSxqCtskn_0Avr_NgNKMZkfvilkSBFY3rFaMuZ0hBYDtrq_srMiYMGqa2pz3RX6G0jTL3gomy7x6TuusqOgvro6K18PyF_JABlVvm6ubfH6dDmB1D86EuQ/s50/google-plus-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(6) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyynudgLfph6Rlb_iSUnMLbxDECyQ8PK4O9mGtejaY48CEQVM-K7LKwdDAgFIiRoX2hXF5_rEkXUTXKCfPqCo_kUb8aiGaljbsTHJS-lK7Y2u8DU4apdwkAMUWsrPf-BBPdKhJhKuVGw/s50/1-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(9) .gadget-icons{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqb2PntwRMGDHAhFuWOMVpTU43sQM28ObEgq1W36agOtlMn5UPwb2PZ6Et3t-yPZhN_pekYCpkFOh4C_O716tftrawt8C5kh0hrEtfzR_fvDThYxIZhwbmRYoXFtxqE0tnREiAqb4BqY/s50/rss-icon.png) no-repeat center !important;
}

Per l'icona numero 9 sono state aggiunte le righe evidenziate di giallo. Si possono usare immagini JPG o anche PNG con sfondo trasparente. La parte non occupata dalla icona verrà visualizzata dello stesso colore grigio scuro delle icone di default che quindi diventerà lo sfondo della immagine PNG.

Fonte | Southern Speakers -