Il lightbox standard di Blogger serve per ingrandire le immagini selezionate oscurandone lo sfondo. L'alternative, come scritto in questo post sarebbero quella di non usarlo ed ottenere un risultato orribile e cioè che quando si va a cliccare un'immagine si viene reindirizzati in un'altra pagina oppure quella modificare il codice manualmente per ogni immagine.
Nell'altra post non ho parlato di come è possibile personalizzare il lightbox di Blogger e lo farò in questo post.
Andate su Modello > Modifica HTML e cercate il tag ]]></b:skin> , prima di esso dovete inserire questo codice:
/* Scuolissima Blogger Lightbox
———————————————– */
/* Sfondo */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}
/* Bordo */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
/* Bottone di chiusura */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5QVqkcHVzk-SZN5_13KoqHbFbz2V4ExMNME3i0Dh8n-ypAncueSqMlTcK6AcwksvA6Cg1Dgs6CgeQGKCEYzE4RBT2jrUURRdKub2897R4b98AqjeYd49tBrfJC52c1D1KvtYUTfilw40/s1600/close.png) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Colore della barra */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
border-top:1px solid #d2d2d2!important;
}
/* Colore del testo */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* Numero delle immagini */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}
Ecco il risultato finale di questo tutorial confrontato con il vecchio lightbox:
Anziché la versione scura, questa nuova è bianca e a mio parere migliore rispetto alla precedente perché per gli utenti è più facile intuire che l'immagine si chiude facendo click su una qualsiasi parte dello sfondo e, inoltre l'immagine ingrandita avrà anche i bordi arrotondati!
Ovviamente il codice è possibile personalizzarlo secondo i propri gusti o abbinamenti col tema in uso, vi basterà modificare il valore dei colori esadecimali del bordo, sfondo, scritte ecc.
