Πώς να Προσαρμόσετε το Lightbox του Blogger

Όσοι έχετε επιλέξει να χρησιμοποιείτε την προβολή Lightbox του Blogger για να εμφανίσετε τις εικόνες σας, έχετε τώρα τη δυνατότητα να αλλάξετε το στυλ της σε ένα τελείως διαφορετικό. Μπορείτε να προσαρμόσετε το Lightbox εξ ολοκλήρου στο γούστο σας.

Για παράδειγμα μπορείτε να αλλάξετε το μαύρο χρώμα της οθόνης, το περίγραμμα ή τη σκιά των εικόνων και το χρώμα του φόντου των μικρογραφιών.Ρίξτε μια ματιά στις εικόνες παρακάτω:

Πριν:

Μετά:

Εάν θέλετε πατώντας το παρακάτω κουμπί, θα μεταβείτε σε μια νέα καρτέλα, στο koprogato.blogspot.gr, όπου έχει εφαρμοστεί το συγκεκριμένο παράδειγμα και εκεί κάντε κλικ σε κάποια εικόνα της κοπελιάς (με τα υπέροχα τατουάζ!!!)

Δείτε demo
Μετά την προσθήκη CSS στον κώδικα μας, ολόκληρο το στυλ του Lightbox θα αλλάξει: το χρώμα του φόντου, η μπάρα που δείχνει τις μικρογραφίες, το περιθώριο των εικόνων, το κείμενο που εμφανίζεται σε αυτό, τη διαφάνεια και το κουμπί κλεισίματος.

Πάμε λοιπόν

Από το αριστερό μενού του Blogger επιλέγουμε το [Πρότυπο] και [επεξεργασία HTML].
Κάνουμε μία φορά κλικ μέσα στο πλαίσιο του κώδικα έτσι ώστε να πάρει την εστίαση.

Με Ctrl + F μέσα στο πλαίσιο του κώδικα, αναζητούμε το ]]></b:skin>

Ακριβώς από επάνω του επικολλούμε το παρακάτω:

/* Blogger Lightbox
----------------------------------------------- */

/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(' Background-Image-URL ') !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Images Border */
.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;
}

/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(' Close-Button-Image-URL ') no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}

/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Πατήστε [Αποθήκευση προτύπου] και τελειώσατε.

Σημειώσεις

Μπορείτε να αλλάξετε την διαφάνεια στο φόντο. Αν βάλετε μια χαμηλότερη τιμή από το 0.8 τότε το φόντο θα γίνει πιο διαφανή. Θα το βρείτε στο τμήμα του κώδικα:
```
opacity: 0.8 !important;
```
Μπορείτε να αλλάξετε το χρώμα του φόντου, αλλάζοντας το #ffffff. Βρείτε το χρώμα που σας ταιριάζει εδώ. Εάν θέλετε όμως μπορείτε να βάλετε σαν φόντο μια εικόνα, αλλάζοντας το Background-Image-URL με το URL της εικόνας που θέλετε. (Βρείτε μία εικόνα στο google και φορτώστε την σε ένα πρόχειρο άρθρο σας στον blogger και στη συνέχεια αντιγράψτε το URL της. Για παράδειγμα εικόνες 200x200 εδώ και 300x300 εδώ. Προσοχή η εικόνα να μην είναι μεγάλη σε μέγεθος αρχείου, γιατί θα αργεί να φορτώσει. Αφήστε το έτσι όπως είναι αν δε θέλετε εικόνα.)
Για να αλλάξετε το χρώμα του κειμένου των εικόνων, αντικαταστήστε το #555555 με αυτό της επιλογής σας. Βρείτε το χρώμα που σας ταιριάζει εδώ.
Για να αλλάξετε το εικονίδιο στο κουμπί κλεισίματος, θα πρέπει να αντικαταστήσετε το κείμενο με το κόκκινο χρώμα: Close-Button-Image-URL με το URL μιας δική σας εικόνας. (μπορείτε να επιλέξετε μία από τις παρακάτω ή να βρείτε μία στο google εδώ και να τη φορτώσετε σε ένα πρόχειρο άρθρο σας στον blogger και στη συνέχεια αντιγράψτε το URL της. Εάν η εικόνα σας έχει πάνω από 24x24 pixels τότε αλλάξτε και τα width: 24px !important; και height: 24px !important;)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKQ2OghndfIEWqcYHporveaORHPIblIqk6PBunB2i8wNaZ4kOb_y3D1_-lZnyVuTLCFJ4znoyLfW1SWe5qbw-elVwkMOXpGh3qplbHfcMQgJvSqnKLctDqX_ZbaFsKozokk79ZimuYgFHT/s20/close-button(1).png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvO2pyn3o7fe8AAsGi8ae2pZVpZMQQPJHP1b2D4akad4rZB6bO6KhNEiDm2ZpjjTm4BLIHwzxNFcFKh7LVUAH0zPzj_yDgCCu6fi9gLOfB1F35uOIdnWsmKeHf_fk5k81Ip2gce-eavy2d/s20/close-button(2).png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJwtooVfLfehfJSEsDHnC38cGf5NLuu3Xoqs6aq-RIxh_AJl-RnbnLf8qnGheeTSHTfYt_xtldwhIzp2bynX0HkWc3fDVrtlec0sE9NTCJlmZJ0TKG0tf2LzFabDsRnn5ehnLrnc8C6E_/s20/close-button(3).png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BGWvt6SMQeJjB-tfdjlf6pShvBaMj-J080m_XRYuRpiFtX9BLRJ1J3WilxZYXhdf5w0gUZsvupntcLbxQkVMLUIBSepvy1IbcAndPtpnKQPq_N1BvHLUb4p6FMOmYHIe0XkPtcySKJvR/s20/close-Button(5).png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbtG5u2lz5436PxAyAY0c5jjgvhR7grZpYn9HciC4BR65lhiv1vESbWz03usiO26SNWSd-pex8kj8jsbZ8SfrysGF_XuCCcYJWpVnCMb8etzjMkRJWAu_pEVWWbIWpoAmsjWF7BLxzG45/s20/close-button(6).png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8GXbUgyA24hE8xcaOXu9NlCx3xKPPdvqphwidxTG1ysygu773NxYjvhKAb7FMy4AP50a59dG6kCQfOPU0xrhk_y_llTvFjpBTdU87pRQeYNnzzKhoZ15sEq9g6XEkz-KpOXHd91l1C4Q/s20/close-Button(7).png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicl1ScrC3eB2STH_FkP3g_9gbtNVI8jctFhBEBKdTlTfhAdFa40CSeeDhzdyq38eLUcWsDHySSmHu1bN19ei8GK406BLA3w0NHWw58bditP96OcEJgyQYSdM9pqWFRS7ZH7V2uXXMkeImR/s20/close-Button(8).png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIy8dGH6WNFwfrVA0dJQmdlN2v7oGRlyO7gTQaLugIX2PoLdyzUtfKVQmByCf0oy9MRrOlEH6hP8DGvuZ6ppS7SLIg4U-PEYdSIf8Zn_rgcmmONGO4r3_yYn15LPe8Dt33T-icbdTae7aX/s20/close_button(4).png

Εάν έχετε κάποια απορία, μη διστάσετε να αφήσετε σχόλιο.