• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ΚΟΥΤΙ ΠΕΡΙΓΡΑΦΗΣ ΟΤΑΝ ΠΕΡΝΑΤΕ ΤΟ MOUSE ΠΑΝΩ ΑΠΟ ΜΙΑ ΛΕΞΗ

DISCRIPTION-BOX
ΚΟΥΤΙ ΠΕΡΙΓΡΑΦΗΣ ΟΤΑΝ ΠΕΡΝΑΤΕ ΤΟ MOUSE ΠΑΝΩ ΑΠΟ ΜΙΑ ΛΕΞΗ
Αν θέλετε να δώσετε κάποιες επεξηγήσεις με ένα discriprion box ή με μία εικόνα ή με ένα pop up window για κάποια λέξη ή φράση που περιέχεται μέσα στην ανάρτησή σας θα πρέπει να βάλετε δύο κομμάτια κώδικα μέσα στην ανάρτησή σας. Ένα στο τέλος της ανάρτησης (το style) και ένα αμέσως πρίν την λέξη ή φράση που θέλετε να δώσετε την επεξήγηση ή την προβολή της εικόνας ή την παραπομπή σε link με άνοιγμα pop up window.
Με τον παρακάτω κώδικα προσπαθώ να τα πετύχω και τα τρία σε ένα αλλά θα χρειαστεί να έχετε και ένα κενό blog στη διάθεσή σας γιατί εκεί μπορείτε να γράψετε κείμενο και να βάλετε εικόνα και να στείλετε τον αναγνώστη με ένα διπλό κλίκ πάνω στη λέξη να δεί την εικόνα και να διαβάσει το κείμενο χωρίς να εγκαταλείψει το blog σας γιατί αυτό θα γίνει με ανοιγμα pop up window. Ας υποθέσουμε για παράδειγμα ότι μέσα στην ανάρτησή μας έχουμε την ακόλουθη πρόταση στην οποία θέλουμε να δώσουμε περισσότερες πληροφορίες στον αναγνώστη με τις 3 τελευταίες λέξεις μας οι οποίες είναι σχετική ανάρτηση εδώ. Παρατηρήστε τι συμβαίνει όταν περνάτε το ποντίκι πάνω από αυτές τις λέξεις και τι γίνεται ότι κάνετε διπλό κλίκ σε αυτές τις λέξεις.

Για να μπορέσετε να φτιάξετε ένα blog με καλό SEO, εμφανίσιμο και λειτουργικό διαβάσε τις συμβουλές που έχω γράψει σε  σχετική ανάρτηση εδώ.Πατήστε διπλό κλίκ στις λέξεις ανάρτηση εδώ και θα ανοίξει ένα pop up window για να διαβάσετε τις συμβουλές μου. Για να ρυθμίσετε που θα εμφανίζετε το κουτάκι της επεξήγησης αν δηλαδή θα είναι πάνω απο την λέξη ή κάτω απο την λέξη αλλάξτε το top:50px σε top:-50px.
Για να πετύχετε το παραπάνω αποτέλεσμα βάλτε τον παρακάτω κώδικα <style> στο τέλος του κώδικα HTML της ανάρτησης σας. Μετά από αυτό βάλτε και το υπόλοιπο μέρος του κώδικα αμέσως πρίν την λέξη ή φράση που θέλετε να δώσετε την επεξήγηση. Μετά από αυτό αποθηκεύτε τον κώδικα HTML της ανάρτησής σας και δείτε το αποτέλεσμα. Εννοείτε ότι θα αλλάξετε το κείμενο επεξήγησης με τα πορτοκαλί γράμματα με το δικό σας και το λινκ του κενού blog με τα πράσινα γράμματα με το δικό σας λινκ blog ή εικόνας.

<style>
a.info {position:relative;color:#33FFFF;text-decoration:none;text-align:left;}
a.info span {display: none}
a.info:hover span {display:block;position:absolute;top:50px;width:300px;height:auto;border:5px solid #FBBB22;background-color:#173377; color:#FFFFFF;font-size:13px;font-family:Arial;text-align: left;padding:5px;}
</style>


<a href="http://my-posts-1.blogspot.gr/2015/10/blog-seo.html"  target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=750, height=500, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;" class="info"> σχετική ανάρτηση εδώ.<span>Πατήστε διπλό κλίκ στις λέξεις ανάρτηση εδώ και θα ανοίξει ένα pop up window για να διαβάσετε τις συμβουλές μου. Για να ρυθμίσετε που θα εμφανίζετε το κουτάκι της επεξήγησης αν δηλαδή θα είναι πάνω απο την λέξη ή κάτω απο την λέξη αλλάξτε το top:50px σε top:-50px.</span></a>

3 σχόλια:

  1. Καλησπέρα. Ακολούθησα τις οδηγίες σου, με κάποια παραλλαγή, για να ανοίγω κείμενο σε νέο παράθυρο. Θέλω όμως να βάζω pdf όπως αυτό που φαίνεται στο παράδειγμά μου http://diaviouanelixi.blogspot.gr/p/blog-page_16.html
    Μπορώ να ανεβάσω pdf σε blog που θα φιλοξενει τα κείμενα ή πρέπει να αρκεστό στο drive?
    Ευχαριστώ εκ των προτέρων

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Μπορείς να ενσωματώσεις το pdf newsletter του τελευταίου μηνός απο το google drive στην συγκεκριμένη σελίδα και τα newsletters των προηγούμενων μηνών που θα είναι και αυτά ανεβασμένα στο google drive να ανοίγουν σε popup window όπως το έχεις ήδη. Για πλήρη ενσωμάτωση pdf στη σελίδα δές εδώ. http://the-best-widgets.blogspot.gr/2015/12/pdf-to-blogger.html Μπορείς να έχεις αν θέλεις και ένα κενό blog στο οποίο θα έχεις εξαφανίσει τις πλευρικές μπάρες και το υποσέλιδο και εκεί μέσα θα κάνεις πλήρεις ενσωματώσεις pdf αρχείων και θα παραπέμπεις με link απο το κανονικό σου blog. Όπως και να έχει τα pdf αρχεία πρέπει κάπου να ανεβούν και απο εκεί να ενσωματωθούν και συμφέρει να ανεβούν στο google drive ή στο scribd.com ή στο box.com

      Διαγραφή
    2. Η βοήθειά όπως πάντα πολύτιμη! Σε ευχαριστώ πολύ. Καλό ΣΚ.

      Διαγραφή

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

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