GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

ΠΩΣ ΕΜΦΑΝΙΖΩ ΜΙΑ ΕΙΚΟΝΑ ΣΕ ΣΤΑΤΙΚΟ ΣΗΜΕΙΟ ΤΟΥ BLOG ΜΟΥ

ΣΤΑΤΙΚΗ ΕΙΚΟΝΑ
ΠΩΣ ΕΜΦΑΝΙΖΩ ΜΙΑ ΕΙΚΟΝΑ ΣΕ ΣΤΑΤΙΚΟ ΣΗΜΕΙΟ ΤΟΥ BLOG ΜΟΥ
Με τον παρακάτω κώδικα μπορούμε πατώντας πάνω σε buttons με περιγραφή να εμφανίσουμε εικόνες σε στατικά σημεία του blog μας. Ο κώδικας αυτός μπορεί να μπεί απλά σαν gadget στις πλευρικές μπάρες, στο υποσέλιδο και μέσα στον κώδικα της ανάρτησης. Αλλάξτε τις εικόνες μου και τις περιγραφές με τις δικές σας εικόνες και περιγραφές. Η θέση που θα εμφανίζεται η κάθε εικόνα αλλάξει εκεί που γράφει position: fixed; left:0px;top:28px; Δείτε πως εμφανίζονται οι 3 παρακάτω εικόνες που έχω βάλει σαν demo.


    LEYKADA

    LEYKADA

    LEYKADA

<style>
.photo1 {position: relative; width:234px;height:16px; background:#105105;color:#FFFFFF; font: 13px arial;margin:0;padding:0px; border: 1px solid #FFFF00;display: inline-block;}
.photo1:before {content: "ΛΕΥΚΑΔΑ ΠΟΡΤΟ ΚΑΤΣΙΚΙ"; font: 13px arial; background:#105105;color:#FFFFFF; }
.photo1:focus {pointer-events: none;}
.photo1:focus .photo1-content {visibility:visible;pointer-events: auto;}
.photo1-content {position: fixed; left:0px;top:28px;width:640px;height:auto;z-index:9999; visibility:hidden;margin:0;padding:0px;display: inline-block;}
</style>
<div tabindex="0" class="photo1"><ul class="photo1-content">
<img src="http://i.imgur.com/rcivwQJm.jpg" title="LEYKADA PORTO KATSIKI" alt="LEYKADA" width:640px; height:400px; /></ul></div>

<style>
.photo2 {position: relative; width:234px;height:16px; background:#173377;color:#FFFFFF; font: 13px arial;margin:0;padding:0px; border: 1px solid #FFFF00;display: inline-block;}
.photo2:before {content: "ΛΕΥΚΑΔΑ ΑΓΙΟΦΥΛΙ"; font: 13px arial; background:#173377;color:#FFFFFF; }
.photo2:focus {pointer-events: none;}
.photo2:focus .photo2-content {visibility:visible;pointer-events: auto;}
.photo2-content {position: fixed; left:400px;top:28x;width:640px;height:auto;z-index:9999; visibility:hidden;margin:0;padding:0px;display: inline-block;}
</style>
<div tabindex="0" class="photo2"><ul class="photo2-content">
<img src="http://i.imgur.com/wIBlr1Zm.jpg"  title="LEYKADA AGIOFYLI" alt="LEYKADA" width:640px; height:400px; /></ul></div>

<style>
.photo3 {position: relative; width:234px;height:16px; background:#760960;color:#FFFFFF; font: 13px arial;margin:0;padding:0px; border: 1px solid #FFFF00;display: inline-block;}
.photo3:before {content: "ΛΕΥΚΑΔΑ ΕΓΓΡΕΜΝΟΙ"; font: 13px arial; background:#760960;color:#FFFFFF; }
.photo3:focus {pointer-events: none;}
.photo3:focus .photo3-content {visibility:visible;pointer-events: auto;}
.photo3-content {position: fixed; left:800px;top:28px;width:640px;height:auto;z-index:9999; visibility:hidden;margin:0;padding:0px;display: inline-block;}
</style>
<div tabindex="0" class="photo3"><ul class="photo3-content">
<img src="http://i.imgur.com/H2PNDWBm.jpg" title="LEYKADA EGGREMNOI" alt="LEYKADA" width:640px; height:400px; /></ul></div>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.