Πώς θα βάλω στο blog εικόνα, κάνοντας κλικ επάνω της να με πάει σε κάποιο site;

Το συγκεκριμένο θέμα μπορεί να θεωρηθεί σαν συνέχεια του θέματος για τη δημιουργία banner. Στην τωρινή περίπτωση υπάρχουν ένα-δύο στάνταρ πραγματάκια που πρέπει να ισχύουν και χρειάζεται να ακολουθούμε κάθε φορά. Ας ξεκινήσουμε λοιπόν. Το πρώτο πράγμα που πρέπει να κάνουμε είναι να έχουμε ανεβάσει σε κάποιο site την εικόνα που θέλουμε να χρησιμοποιήσουμε, ή να βρούμε το link μιας εικόνας σε οποιοδήποτε site. Σχετικά sites για να ανεβάζουμε εικόνες είναι το photobucket.com, το flickr.com και το δικό μας freefotos.gr. Μπορούμε να ανοίξουμε εκεί έναν λογαριασμό και να "ανεβάζουμε" τις φωτογραφίες που θέλουμε να φορτώνουμε στο blog μας.

Αν πάλι δε θέλουμε να μπλέκουμε με τέτοια sites, αρκεί να βρούμε μια φωτογραφία που μας αρέσει σε οποιαδήποτε σελίδα μέσα στο Internet, να κάνουμε δεξί κλικ επάνω της, να επιλέξουμε "Ιδιότητες" ("Properties") και να αντιγράψουμε το url της από το αντίστοιχο πεδίο (δείτε την παρακάτω εικόνα).



Έστω λοιπόν ότι έχουμε το link της εικόνας. Έστω ότι το link αυτό είναι το banner του blog μας δηλαδή το https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24p_mZi3iWMUFFIqxHlVI_qieazH87zOXRuwIxwvjxm2pJo5FET4JTRXhDi1THyqjPxwVF6Tl9Asmu-IXo1yXrm0puteocfRELnDE_11mCMohVQse16eUhVF_1qH1YCHs9GKgFD0GzaHd/s1600-r/PC+hands+mikri+analysi.jpg

Η συνέχεια είναι απλή. Θα πρέπει να προσθέσουμε ένα gadget , π.χ. στην πλευρική στήλη, μέσω του οποίου θα δημιουργηθεί αυτό που θέλουμε. Δηλαδή θα δημιουργηθεί μια εικόνα, κάνοντας κλικ πάνω της θα πηγαίνουμε στο site που επιθυμούμε. Έστω ότι κάνοντας κλικ επάνω στην εικόνα, θα ανοίγει η σελίδα http://pchands.blogspot.com .

Πάμε λοιπόν. Από την αρχική σελίδα του blog επιλέγουμε "Προσαρμογή". Στη σελίδα που ανοίγει κάνουμε κλικ στην καρτέλα "Διάταξη" και στα "Στοιχεία Σελίδας" κάνουμε κλικ επάνω στην "Προσθήκη Gadget" για να προσθέσουμε gadget στην πλευρική στήλη.

Σημείωση: Το gadget και κατ' επέκταση αυτό που θέλουμε να κάνουμε, μπορούμε να το προσθέσουμε σε οποιοδήποτε σημείο του blog μας και όχι μόνο στην πλευρική στήλη, αρκεί το σημείο αυτό να δέχεται gadgets.

Αφού λοιπόν επιλέξαμε να προσθέσουμε κάποιο gadget, ήρθε η ώρα να επιλέξουμε το κατάλληλο gadget για να κάνουμε τη δουλειά μας. Αυτό δεν είναι άλλο από το HTML/JavaScript . Κάνουμε λοιπόν κλικ επάνω του και ανοίγει το παράθυρο, μέσα στο οποίο θα εισάγουμε τον κατάλληλο κώδικα. Ο κώδικας όπως ακριβώς πρέπει να είναι για το παράδειγμά μας φαίνεται στην παρακάτω εικόνα.


*Δεν χρειάζεται να βάλουμε τίτλο.


Ας εξηγήσουμε κάθε σημείο του κώδικα:

Στο πρώτο κομμάτι του κώδικα γράφουμε το link της σελίδας που θέλουμε να ανοίγει όταν κάνουμε κλικ επάνω στην εικόνα. Αντί λοιπόν του http:pchands.blogspot.com , εσείς θα βάλετε το link του site που επιθυμείτε.

Το target="_blank" σημαίνει πως, αφού κάνουμε κλικ, το καινούριο site θα ανοίξει σε νέα σελίδα και όχι στην ίδια σελίδα που ήδη βρισκόμαστε.

Μετά το img src=" γράφουμε το link της εικόνας που θέλουμε να εμφανίζεται στο blog μας (αυτή που όταν κάνουμε κλικ θα πηγαίνουμε στο νέο site).

Το width="500" height="180" δηλώνουν τις διαστάσεις της εικόνας και μπορούμε να τα αλλάζουμε κατά το δοκούν. Αρκεί να προσέχουμε να μη βγαίνει μεγάλη η εικόνα.

Το border="2" δηλώνει το πάχος του περιγράμματος της εικόνας. Αν δε θέλουμε η εικόνα να έχει περίγραμμα, τότε αντί για 2 βάζουμε 0. Εννοείται ότι και αυτό το αλλάζουμε όσο θέλουμε εμείς.

Τέλος, το alt="link για pchands" είναι σχόλιο κυρίως για δική μας διευκόλυνση. Εκεί γράφουμε ότι θέλουμε, ή δε γράφουμε τίποτα.

Ολόκληρο τον κώδικα μπορείτε να τον αντιγράψετε από το παρακάτω πλαίσιο. Απλά αλλάξτε τα στοιχεία που αναφέραμε με αυτά που θέλετε εσείς.

Κώδικας:

<a href="http://pchands.blogspot.com" target="_blank"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24p_mZi3iWMUFFIqxHlVI_qieazH87zOXRuwIxwvjxm2pJo5FET4JTRXhDi1THyqjPxwVF6Tl9Asmu-IXo1yXrm0puteocfRELnDE_11mCMohVQse16eUhVF_1qH1YCHs9GKgFD0GzaHd/s1600-r/PC+hands+mikri+analysi.jpg" width="500" height="180" border="2" alt="link για pchands" /></a>