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

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified


  • Σύνδεση στον 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="http://1.bp.blogspot.com/_4HKUHirY_2U/Sv4dr-0tsXI/AAAAAAAAALM/ZDZtNU_Ekkw/Autumn+Light,Canada.jpg" height="225"/><br/>Autumn Light,Canada-Nature Scene</div>
  • Αλλάξτε αν θέλετε στον κώδικα τις παραμέτρους και τα χρώματα.




    0 σχόλια:

    Post a Comment

     
    back to top