Come personalizzare lightbox immagini di Blogger


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(http://1.bp.blogspot.com/-CpqRy5zMB1o/VEF1sJKo1dI/AAAAAAAAZV4/YssgtFQh1lI/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.



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".