Πως να προσθέσετε μία εικόνα δίπλα από το τίτλο κάθε ανάρτησης

Ένα όμορφο και εμφανίσιμο trick θα σας δείξω σήμερα.
Είναι η προσθήκη μιας εικόνας ή μιας φωτογραφίας εάν θέλετε, δίπλα από τον τίτλο κάθε ανάρτησης στο blog σας. Σπάει την μονοτονία του "ξερού" κειμένου, και προσθέτει μια όμορφη πινελιά στην εμφάνιση του blog σας.
Είναι πάρα πολύ εύκολο. Δείτε πως γίνεται.

Κατ' αρχήν πρέπει να βρούμε την εικόνα που θέλουμε να βάλουμε.

Βρήτε κάποια που να εκφράζει το blog σας ή την προσωπικότητά σας. Μπορείτε να βάλετε ακόμα και την φωτογραφία σας.
Θεωρώ περιττό να σας πω, ότι η εικόνα πρέπει να έχει πολύ μικρές διαστάσεις, για να χωράει δίπλα από τον τίτλο και να δείχνει ομοιόμορφο. Ιδανικές διαστάσεις είναι από 32χ32 μέχρι το πολύ 50χ50.

Αφού λοιπόν φτιάξουμε την εικόνα μας, θα πρέπει να την ανεβάσουμε σε κάποιο site που φιλοξενεί εικόνες, για να πάρουμε την διεύθυνσή της.
Ενδεικτικά να σας πω κάποια τέτοια sites. .........


http://tinypic.com/
http://www.imageshack.us/
http://www.freeimagehosting.net/
http://imagerous.com/

και πολλά άλλα.

Επίσης μπορείτε να χρησιμοποιήσετε και τον blogger, ανεβάζοντας μια εικόνα, παίρνοντας την url της.

Στο σημερινό παράδειγμα, αυτό έκανα.
Η url που πήρα από την εικόνα είναι αυτή

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9S3s2qtPAejhMIMWuLzFyDba4h5I7wKYGBTnU0C8Ibj5jW6BxOWl9nUKI8Y9Qluc1V7VMigIyzdWdgVE6l4ozuRtTxd_BQZ5F4_tKx-h0nowXdrRlAJ63YDH0tRLuOHI5s5hPx7-VnU/s1600/favicon.jpg

Αφού έχουμε αποθηκεύσει πρόχειρα σε ένα σημειωματάριο την url της εικόνας, συνδεόμαστε με τον λογαριασμό μας, και αφού κάνουμε μία λήψη Προτύπου, για παν ενδεχόμενο, πάμε Διάταξη --> Σχεδίαση --> Επεξεργασία HTML, τσεκάρουμε το κουτάκι "Επέκταση προτύπων γραφικών στοιχείων", και με Ctrl+F ψάχνουμε να βρούμε το

<a expr:href='data:post.url'><data:post.title/></a>

Στη συνέχεια, παίρνουμε τον παρακάτω κωδικό

<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9S3s2qtPAejhMIMWuLzFyDba4h5I7wKYGBTnU0C8Ibj5jW6BxOWl9nUKI8Y9Qluc1V7VMigIyzdWdgVE6l4ozuRtTxd_BQZ5F4_tKx-h0nowXdrRlAJ63YDH0tRLuOHI5s5hPx7-VnU/s1600/favicon.jpg"/>

και τον τοποθετούμε ανάμεσα στον προηγούμενο κωδικό.
Θα δείχνει δηλαδή έτσι.

<a expr:href='data:post.url'> <img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9S3s2qtPAejhMIMWuLzFyDba4h5I7wKYGBTnU0C8Ibj5jW6BxOWl9nUKI8Y9Qluc1V7VMigIyzdWdgVE6l4ozuRtTxd_BQZ5F4_tKx-h0nowXdrRlAJ63YDH0tRLuOHI5s5hPx7-VnU/s1600/favicon.jpg"/> <data:post.title/></ a>

Το σημείο με το κόκκινο χρώμα, είναι η διεύθυνση της εικόνας. Θα το αντικαταστήσετε με το δικό σας url.
Επίσης έχετε την δυνατότητα εάν το θέλετε, να τοποθετήσετε την εικόνα δεξιά του τίτλου, αλλάζοντας το left, αυτό με το μπλε χρώμα, γράφοντας right.

Πατήστε τώρα αποθήκευση, και είστε έτοιμοι!

Τέλος, ίσως χρειαστεί να "πειράξετε" το margin, για να μπει η εικόνα εκεί που θέλετε ακριβώς, αλλά δεν το νομίζω, καθώς οι ρυθμίσεις που έχουν γίνει είναι ακριβείς.

Ελπίζω να σας άρεσε. Περιμένω τα σχόλιά σας.

Αν βρίσκετε χρήσιμες τις αναρτήσεις μου, και θέλετε να σας έρχονται μέσω e-mail, για να ενημερώνεστε άμεσα για κάθε καινούρια ανάρτηση, κάντε ενγραφή στο RssFeed που βρίσκεται στη sidebar του Blog μου!