1 εικόνα και...4 σύνδεσμοι!

Η φίλη μας η Ρένα, ρώτησε πώς έφτιαξα την εικόνα με τους τέσσερις συνδέσμους (βλ. αριστερά-τώρα είναι 6!). Στην πραγματικότητα πρόκειται για τέσσερις εικόνες (η κάθε μία με το δικό της σύνδεσμο) μέσα σε ένα πλαίσιο. Αυτό το έκανα με τον παρακάτω κώδικα. 
Το μόνο που έχετε να κάνετε είναι να προσθέσετε ένα gadget HTML/Javascript στο blog σας και να αντιγράψετε εκεί μέσα, τον παρακάτω κώδικα. Μην ξεχάσετε την "Αποθήκευση" στο τέλος.
Φυσικά, θα πρέπει να κάνετε κάποιες αλλαγές, έτσι ώστε να βάλετε τις εικόνες και τους συνδέσμους που θέλετε εσείς. 
Εγώ έχω τοποθετήσει μόνο μία εικόνα σαν δείγμα και τις υπόλοιπες τις έχω αφήσει κενές. 
Εννοείται ότι μπορείτε να σβήσετε την πρώτη εικόνα και το σύνδεσμό της (που οδηγούν στο δικό μου blog!) και να βάλετε και εκεί ό,τι θέλετε.
Αρκεί να μην πειράξετε ούτε κόμμα από τον υπόλοιπο κώδικα.


Υπενθυμίζω ότι τη διεύθυνση URL μιας εικόνας τη βρίσκουμε αν κάνουμε δεξί κλικ επάνω της και "Αντιγραφή διεύθυνσης URL εικόνας"















Τη διεύθυνση URL ενός blog ή μιας συγκεκριμένης ανάρτησης τη βρίσκουμε φυσικά πάνω-πάνω στην οθόνη μας, όπως βλέπετε στην εικόνα.









Αντιγράψτε τον παρακάτω κώδικα και κάντε τις απαραίτητες αλλαγές.


Όταν λέω αλλαγές, εννοώ να σβήσετε τις φράσεις: ΔΙΕΥΘΥΝΣΗ URL ΤΗΣ ΣΕΛΙΔΑΣ και ΔΙΕΥΘΥΝΣΗ URL ΤΗΣ ΕΙΚΟΝΑΣ, και στη θέση τους να επικολλήσετε τις πραγματικές διευθύν-σεις που θέλετε.
Το αποτέλεσμα θα είναι κάπως έτσι, πριν κάνετε τις αλλαγές.
Το έφτιαξα λίγο πιο ουδέτερο από το δικό μου, για να ταιριάζει σε όλα τα γούστα!

 Αν κάτι πήγε στραβά, ρωτήστε με και θα το διορθώσουμε μαζί!
Προσοχή, απαραίτητη προϋπόθεση για να φαίνεται όμορφο και ταιριαστό στο blog σας, είναι η πλαϊνή σας στήλη όπου θα το τοποθετήσετε να είναι τουλάχιστον 200px σε πλάτος.

Σχόλια

  1. πολυ καλο!!!δεν πιανει και πολυ χωρο στο blog!!
    εγω θα ηθελα να μαθω πως μπορω να φτιαξω τις κατηγοριες οπως εχεις εσυ ''κεντρικη'' ''λιχουδιες'' ''χειροτεχνιες'' κτλ φιλακιααααα

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Γεια σου, Αλεξάνδρα! Δες αυτή την ανάρτηση, και συγκεκριμένα το Νο4! Νομίζω ότι κάτι τέτοιο θέλεις.
      Θα σας δείξω, αν θέλετε, κάποια στιγμή μια σχετικά απλή παρέμβαση στον κώδικα του blog, ώστε να διαμορφώσετε την εμφάνιση της οριζόνιας αυτής λίστας, ανάλογα με τις ανάγκες σας.

      Διαγραφή
    2. ποια αναρτηση εννοεις Λινα μου;

      Διαγραφή
    3. Χαχα, δίκιο έχεις! Ξέχασα να βάλω το σύνδεσμο! Καλά που μου το είπες!
      "http://horiseirmo.blogspot.gr/2013/03/blog.html"

      Διαγραφή
    4. χαχα λεω κι εγω μηπως ειμαι τοσο ασχετη και δεν καταλαβα!!θα το δοκιμασω λοιπον!!ευχαριστω!!!

      Διαγραφή
  2. Πολύ καλό Λίνα... Θα το δοκιμάσω!!! Φιλιά

    ΑπάντησηΔιαγραφή
  3. Μπράβο Λίνα! Θα μας κάνεις ξεφτέρια. Φιλάκια!

    ΑπάντησηΔιαγραφή
  4. Λίνα θα γίνουμε όλες .....τσακάλια!!!Ευχαριστούμε πολύ!!!Φιλιά!!

    ΑπάντησηΔιαγραφή
  5. Και πάλι μπράβο Λινα μας βοηθάς πολυ έτσι,σε ευχαριστώ καλό βραδυ φιλάκια.

    ΑπάντησηΔιαγραφή
  6. ΕΥΧΑΡΙΣΤΩ ΠΟΛΥ ΛΙΝΑ ΜΟΥ!!!!!
    ΘΑ ΤΟ ΔΟΚΙΜΑΣΩ ΚΑΙ ΘΑ ΔΕΙΣ ΤΟ ΑΠΟΤΕΛΕΣΜΑ, ΑΝ ΤΑ ΚΑΤΑΦΕΡΩ!!!
    ΚΑΛΟ ΒΡΑΔΥ!!!
    ΦΙΛΑΚΙΑ!!!!

    ΑπάντησηΔιαγραφή
  7. καιρός ήταν να μου μάθει κι εμένα κάτι κάποιος αλλος! Ολο εγω μαθαίνω στα φιλαράκια μου. Ευχαριστώ!

    ΑπάντησηΔιαγραφή
  8. Είσαι θεά!! Σου το έχω πει; Ευχαριστούμε και πάλι!! Φιλάκια πολλά.

    ΑπάντησηΔιαγραφή
  9. ΛΙΝΑΑΑΑΑΑΑΑΑΑΑ!!!!
    ΔΕΝ ΤΑ ΚΑΤΑΦΕΡΑ!!
    ΔΕΝ ΜΠΟΡΕΣΑ ΝΑ ΒΡΩ ΤΗ ΔΙΑΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ!!
    ΠΟΥ ΒΡΙΣΚΕΤΕ;
    ΤΟΣΟ ΑΣΧΕΤΗ!
    ΑΥΡΙΟ ΠΑΛΙ!!!
    ΚΑΛΟ ΒΡΑΔΥ!!!!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Γεια σου Ρένα! Κάνε δεξί κλικ επάνω στην εικόνα και μετά Αντιγραφή διεύθυνσης URL εικόνας! Όταν κάνεις επικόλληση στον κώδικά σου θα φανεί!

      Διαγραφή
  10. Σε διαβάζω ανελλιπώς και σ΄ευχαριστώ πολύ για όλες τις πληροφορίες! Σχολιάζω σ΄αυτή σου την ανάρτηση γιατί εδώ έχω και μια σχετική απορία: Για περισσότερους από 4 συνδέσμους, μπορεί να διαφοροποιηθεί ο παραπάνω κώδικας και τι πρέπει να κάνω? Επίσης, πως επιλέγεις και βάζεις χρώμα γύρω-γύρω στο πλαίσιο (όπως έχεις βάλει εσύ το μωβ..) της παρουσίασης/ Πολλά φιλιά και πάλι σ΄ευχαριστώ!

    ΑπάντησηΔιαγραφή
  11. Καλως σε βρηκα και τι καλα που εκανα που σε βρηκα χα χα σε χρειαζόμουν!!!!!
    Ευχαριστουμε πολυ για την πολύτιμη βοηθεια σου!!!
    Φιλακια πολλα!!!

    ΑπάντησηΔιαγραφή
  12. ΟΥΦΦ..ΕΚΑΝΑ ΟΤΙ ΓΡΑΦΕΙΣ, ΑΛΛΑ ΔΕΝ ΕΜΦΑΝΙΖΕΤΑΙ...ΤΙ ΛΑΘΟΣ ΕΚΑΝΑ; ΕΥΧΑΡΙΣΤΩ

    ΑπάντησηΔιαγραφή
  13. πως μπορούμε να αλλάξουμε το περίγραμμα;

    ΑπάντησηΔιαγραφή
  14. Λίνα μου , γεια σου! Πάλι εδώ!Αυτή η αλλαγή του προτύπου ήταν θαυματουργή. Ήταν τόσο απλό!!!
    Τώρα βλέπω αυτό το θέμα σου:1 εικόνα και...4 σύνδεσμοι! είναι πολύ πρακτικό και θέλω να το εφαρμόσω. Δεν κατάλαβα όμως κάθε φορά που κάνουμε νέ ανάρτηση ακολουθούμε αυτή τη διαδικασία;Και πώς μπαίνουν οι 4 εικόνες;
    Αν μπορέσεις ρίξε μια ματιά να δεις τι έκανα, αν και δεν έχω ολοκληρώσει.

    ΑπάντησηΔιαγραφή

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

Δημοφιλείς αναρτήσεις από αυτό το ιστολόγιο

Πώς θα κάνω κλήρωση διαγωνισμού με το random.org

Πώς δημιουργώ σύνδεσμο σε κείμενο ή εικόνα;

Πώς θα βάλω λογότυπο/υπογραφή στην εικόνα μου;