13 Ιουνίου 2010



9 Στατική εικόνα στο Blogger

Αν κοιτάξετε προσεκτικά, θα δείτε μια στατική εικόνα (το Avatar μου) απο σήμερα, στην αριστερή κάτω γωνία του Blog μου. Όσο κι αν κάνετε Scroll πάνω - κάτω εσείς, η εικόνα αυτή παραμένει στο ίδιο σημείο. Την έφτιαξα μάλλιστα όσο γίνεται μικρή, να μην εμποδίζει στο διάβασμα των στοιχείων της αριστερής μου μπάρας.

Για όποιον ενδιαφέρεται να το κάνει κι εκείνος στο δικό του Blog, θα σας δώσω εδώ μια αναλυτική περιγραφή.
Όποιος ακολουθήσει πιστά τις οδηγίες μου, θα το καταφέρει με απόλυτη επιτυχία, και σχετικά ..πανεύκολα. Πάμε λοιπόν.

Βήμα 1ο: Επιλέγουμε την στατική εικόνα
Το βήμα αυτό, είναι το πιο σημαντικό απ' όλλα. Ναι, όντως είναι το βασικότερο. Εγώ για παράδειγμα επέλεξα το Avatar μου. Άλλος ίσως θελήσει να βάλει πραγματική φωτογραφία του, άλλος πάλι, κάποια εικόνα σχετική με την θεματολογία του Blog του, και η φαντασία του καθ' ενός, όρια δεν έχει.
Πραγματικά, στην επιλογή της εικόνας, αφήστε την φαντασία σας να "οργιάσει".

Μπορείτε να επιλέξετε οποιαδήποτε εικόνα, σε JPEG, GIF, PNG, κ.λ.π. (αν και αυτά τα τρία Formats eίναι υπέρ αρκετά πιστεύω).
Προσπαθήστε να είναι μικρή όσο γίνεται (αρκεί να είναι ευκρινής) για να μην εμποδίζει την ανάγνωση η το να φαίνονται καθαρά τα στοιχεία της μπάρας όπου θα εμφανίζεται.

Βήμα 2ο: Επιλογή τόπου φιλοξενίας
Στο βήμα αυτό, επιλέγουμε πού θα ανεβάσουμε την εικόνα μας. Μπορείτε να την ανεβάσετε σε ένα σωρό διαδικτυακούς τόπους. Θα σας δώσω εδώ 2-3, που πατώντας τους θα ανοίγουν σε δικό τους παράθυρο, ώστε να μην κουράζεστε πατώντας συνεχώς "μπρός-πίσω":

Imageshack
Freeimagehosting
Flickr

Υπάρχουν δεκάδες ακόμη, και που μπορείτε να βρείτε κάνοντας αναζήτηση με ανάλογες "λέξεις κλειδιά", όπως για παράδειγμα: "free image hosting"

Στην σελίδα αυτή φιλοξενίας, θα πάρετε και ένα Direct Link απο την εικόνα που θα ανεβάσετε.
Αντιγράψτε το κάπου, θα το χρειαστείτε σε λίγο.

Βήμα 3ο: Δημιουργία του κώδικα
Για να φτιάξουμε τον απαιτούμενο κώδικα, που θα τοποθετήσουμε στο πρότυπό μας, θα επισκευθούμε τώρα μια ιστοσελίδα. Αυτήν εδώ: static-image-code-generator

Όπως βλέπετε, περιμένει απο εσάς να δώσετε μονάχα δύο πληροφορίες.
1. Το Direct Link που αντιγράψατε απο την σελίδα όπου ανεβάσατε την εικόνα λίγο πρίν (στο βήμα 2) και
2. Να επιλέξετε το σημείο όπου θα εμφανίζεται η εικόνα στο Blog σας.
Οι επιλογές είναι 4, δηλαδή, στις 4 γωνίες του Blog.
Για όσους δεν γνωρίζουν Αγγλικά, τους βοηθάει με εικόνες, έχοντας έναν κύκλο στο σημείο που θα εμφανίζεται η εικόνα. Επιλέξτε λοιπόν το σημείο που θέλετε.

3. Πατήστε το κουμπί "Click to Create Code", και αμέσως απο κάτω στο πλαίσιο, θα δείτε έναν κώδικα. Αντιγράψτε τον κάπου.

Βήμα 4ο: Αντιγραφή και επικόληση του κώδικα
Αφού τον αντιγράψατε κάπου, πάντε στην "Διάταξη" ή σε άλλους "Σχεδίαση" και πατήστε "Επεξεργασία HTML".
Βρείτε το /head
Και επικολήστε (Paste) τον προηγούμενο αποθηκευμένο κώδικα, ακριβώς απο κάτω του.
Πατήστε "Προεπισκόπιση" και αν όλλα δείχνουν όπως τα θέλατε, πατήστε "Αποθήκευση Προτύπου".

**Αν για κάποιο λόγο θέλετε να το ξαναβγάλετε απο το blog σας, απλά βρείτε στην διάταξη το /head, και αμέσως απο κάτω του θα δείτε τον κώδικα που βάλατε. Σβήστε τον και ξανα αποθηκεύστε το πρότυπό σας.

ΜΗΝ ΞΕΧΝΑΤΕ ΜΟΝΟ, ΠΡΙΝ ΚΑΝΕΤΕ ΟΤΙΔΗΠΟΤΕ ΣΤΟ HTML ΤΟΥ BLOG ΣΑΣ, ΝΑ ΚΑΝΕΤΕ BACK UP (Λήψη πλήρους προτύπου)

"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις,"



Οι Σπόνσορες του Blog




Print this post



Related Posts :



9 σχόλια:

Gaurakos είπε... Best Blogger Tips

Καλόοοο Θα το δοκιμάσω.
Καλημέρες


AATON είπε... Best Blogger Tips

Καλή επιτυχία Γαυράκο.
Την δική μου την "έφτιαξα" κάπως στο Photoshop, αφαιρώντας τα περιττά μέρη, και κρατώντας αυτό που ήθελα να φαίνεται, κάνοντας χρήση του Transparent σε .PNG


fani είπε... Best Blogger Tips

Kαλημέρα Νικόλα και καλή εβδομάδα να έχεις όπως και όλοι μας. Θέλω να σε ρωτήσω γιατί πρέπει ν ανατρέξουμε για τη δημιουργία κώδικα ΗΤΜL σε άλλο δικτυακό τόπο όπως στο static-image-code-generator , αφού, εκεί που συνήθως ανεβάζουμε την εικόνα, που έχουμε επιλέξει, όπως είναι για παράδειγμα το photobucket ή το imageshack υπάρχει και το Direct Link και ο HTML CODE.
Σ ευχαριστώ πολύ για την πολύ ενδιαφέρουσα ανάρτησή σου..και πάλι καλή σου μέρα.


AATON είπε... Best Blogger Tips

Καλημέρα Φανή μου.
Για δύο λόγους θα έλεγα. Παράδειγμα:
Στην σελίδα αυτή, επιλέγοντας εσυ το σημείο που θα εμφανίζεται η εικόνα, αυτόματα αλάζει και ο κώδικας απο κάτω σε κάθε αλαγή. Αλλιώς, θα έπρεπε να γράψω μια ανάρτηση, με ξεχωριστό κώδικα για κάθε σημείο εμφάνισης της εικόνας.
Στην σελίδα επίσης αυτή, όσοι γνωρίζετε καλά Αγγλικά, θα βρείτε κι άλλα θέματα που μπορεί κάποια να σας ενδιαφέρουν.


fani είπε... Best Blogger Tips

Α...ψιλοκατάλαβα , τι κατάλαβα δηλαδή ..εκεί που λέω ..αυτό το έμαθα καλά , μετά έρχεται το επόμενο και ανατρέπει το προηγούμενο..... πάντως Νικόλα μου να ξέρεις ότι μπαίνω-βγαίνω στη σελίδα σου καθημερινά τουλάχιστον 3-4 φορές για να μαθαίνω...νάσαι καλά.


fani είπε... Best Blogger Tips

Νικόλα μου ακολούθησα κατά γράμμα τις οδηγίες σου πλην όμως δεν εμφανίζεται η στατική(πρόχειρη) εικόνα που έβαλα...γιατί;
Yπ όψιν ότι το κοιτάω από άλλο υπολογιστή ως επισκεπτρια.


Mitsaras είπε... Best Blogger Tips

Σορυ φιλε αλλα εγω δεν βλεπω τιποτα γιατι εχω φιλτρα, και ουτε θελω να δω εδω που τα λεμε.


AATON είπε... Best Blogger Tips

*** Φανή, αν ακολουθήσεις τα βήματα "κατά γράμμα" θα εμφανιστεί απο όποιο υπολογιστή κι αν το δείς.

*** Φίλε μου Μητσάρα, εάν κάποιος "δεν θέλει" να δεί, δεν θα τον κάνουμε να δεί με το ζόρι, αυτά είναι για όσους 'θέλουν' να δούν :)


mpousoulas είπε... Best Blogger Tips

Μήπως μπορείς να με βοηθήσεις γιατί είμαι άσχετος: Γιατί αντί στη θέση του αρχικού κειμένου πριν το (αυτόματο)read more εμφανίζεται η ένδειξη Normal 0 false false false EL X-NONE X-NONE MicrosoftInternetExplorer4 ...

Περιμένω απάντηση


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

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

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

Next Next Next