Όμορφες λεζάντες ( Captions ) με CSS στις φωτογραφίες σας

Όπως ήδη ξέρετε το Blogger μας δίνει την δυνατότητα  να προσθέσουμε λεζάντες στις φωτογραφίες μας .

Αν δεν ξέρετε πως να βάλετε λεζάντες λοιπόν δείτε πως να το κάνετε :

1 . Ανεβάζετε κανονικά την φωτογραφία που θέλετε να δημοσιεύσετε στην ανάρτηση ( πιστεύω όλοι ξέρετε πως δημοσιεύουμε εικόνες στο blogger ) και όταν φορτώσει η εικόνα , πατήστε με τον κέρσορα σας ελαφρά πάνω στην φωτογραφία , μέχρι να εμφανιστεί ένα μικρό  μπλε πλαίσιο , απ’ όπου ρυθμίζετε την διάταξη και το μέγεθος της εικόνας .



2 .Εκεί θα δείτε ένα σύνδεσμο Προσθήκη λεζάντας ,  πατήστε το και κάτω από την  φωτογραφία σας θα εμφανιστεί το  κείμενο Προσθήκη λεζάντας





3 . Το διαγράφετε  αυτό το κείμενο και στην θέση του γράφετε  ότι εσείς θέλετε , έπειτα δημοσιεύετε την ανάρτηση σας  και το αποτέλεσμα θα μοιάζει κάπως έτσι :

Να σας πω την αλήθεια , δεν είναι και πολύ εντυπωσιακό !!!!!

Ας το αλλάξουμε λοιπόν , να το κάνουμε να φαίνεται πιο  όμορφο .

Για να το κάνουμε αυτό απλά θα τροποποιήσουμε τον αρχικό κώδικα στο πρότυπο μας .

Σημαντικό  :  Πριν επεξεργαστείτε το Πρότυπό σας κάνετε πάντα ένα αντίγραφο ασφάλειας , πατώντας τον σύνδεσμο   Λήψη πλήρους προτύπου

Βήμα 1ο :

Πηγαίνετε  Σχεδίαση –> Επεξεργασία HTML και κάντε κλικ στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων

Βήμα 2ο :

Τώρα βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;

}
.tr-caption-container img {
  border: none;
  padding: 0;
}

Τώρα, αυτό που πρέπει να κάνετε είναι να διαγράψετε τις γραμμές τις  οποίες έχω τονίσει με κόκκινο χρώμα .

Βήμα 3ο :

Αντιγράψτε τον κώδικα που σας δίνω παρακάτω και κολλήστε τον ακριβώς πάνω από την ετικέτα  ]]></b:skin>

table.tr-caption-container {
padding-top: 4px;
margin: 10px;
background-color: #f4f3f3;
text-align: center; 
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-color:#a8a8a8 #a8a8a8 #a8a8a8;
border-style:solid solid solid;
border-width:1px 1px 1px;
}
.tr-caption-container img {
padding-top: 4px;
margin: 10px;
background-color: #f4f3f3;

}

.tr-caption{
padding: 0 4px 5px;
margin: 0;
letter-spacing:.1em;
color: #000;
font-weight: bold;
text-shadow:1px 1px 1px #fff;
line-height: 17px;
font: Cambria, "Chaparral Pro", Georgia, "Times New Roman", serif;
}

Αποθηκεύετε το πρότυπο σας και δείτε το αποτέλεσμα .