Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Σάββατο, Μαΐου 15

0

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

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

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

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

λεζαντα

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


λεζαντα1

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;
}

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

Autumn Flowers


0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS