CSS τίτλος στις εικόνες του Blogger

• Σύνδεση στον Blogger
• Σχεδίαση / Επεξεργασία HTML
• Βρείτε στον κώδικα την ετικέτα </head>
• Ακριβώς πριν από αυτήν επικολλήστε τον παρακάτω κώδικα:

<style type='text/css'>
.picturecaption { background-color: #000000;
filter:alpha(opacity=80);opacity:0.8;border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif;color:#ffffff; }
.picturecaption img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>

• Αποθηκεύστε το πρότυπό σας.
• Όταν θέλετε να προσθέστε τέτοιου είδους εικόνες τότε χρησιμοποιήστε το παρακάτω παράδειγμα:

<div style="width:302px;" class="picturecaption left"><img width="300" alt="Image short description" src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ" height="225"/><br/>ΕΙΣΑΓΕΤΕ ΤΟΝ ΤΙΤΛΟ ΕΔΩ</div>

Δείτε το παρακάτω παράδειγμα:
<div style="width:302px;" class="picturecaption left"><img width="300" alt="CSS Text Captions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkX3Hz7iyuYG7bE3kcgQuztc3Zdogqh7UTqf0DgLIbbiLfzZ-zecutgRqsbdLH1aM5M6toA2Og0IZxE86o2U8d_3W4daiPnkI4xRNSAmVLdpP6YlnKN6UxEb8295lSQ0MWK9kFhzt3JCui/+Light,Canada.jpg" height="225"/><br/>Autumn Light,Canada-Nature Scene</div>

• Αλλάξτε αν θέλετε στον κώδικα τις παραμέτρους και τα χρώματα.