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


Ένα όμορφο και εμφανίσιμο 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, για να μπει η εικόνα εκεί που θέλετε ακριβώς, αλλά δεν το νομίζω, καθώς οι ρυθμίσεις που έχουν γίνει είναι ακριβείς.

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


Add To Facebook Add To Twitter Add To Yahoo Stumble This Fav This With Technorati Add To Del.icio.us Digg This Add To Reddit

11 σχόλια:

pandelees karagiann είπε...

ρε συ εκαβιτη, ξερεις ποσο πολυτιμα ειναι ολα αυτα που αναρτειτε, και συ και η υπολοιπη παρεα των blogers σχετικα με την εμφανιση των blogs μας..μας εχετε βοηθησει να κανουμε τα site μας πιο εμφανισημα και να κατανοουμε καθε διαδυκτιακη λειτουργια ...και με τη σημερινη αναρτηση παμε παλι ...ταμειο !!!ευχαριστω...

Gaurakos είπε...

Καλό Tutorial Και μορτικο.
Μόλις το τοποθέτησα. Ευχαριστώ.

ekabitis είπε...

Pan de lee, σε ευχαριστώ πολύ για τα καλά σου λόγια. Κάνουμε ό,τι μπορούμε για να βοηθάμε να αναβαθμιστεί το blogging στην Ελλάδα.

Gaurako, ευχαριστώ και εγώ για τις επισκέψεις σου στο blog. Να 'σαι καλά.

Mitsobo είπε...

file mu s'efharisto poli eine super!!!

ekabitis είπε...

Mitsobo, να' σαι καλά. Σε ευχαριστώ για την επίσκεψη και το σχόλιό σου.

9.62 FM είπε...

καταπληκτικο εκαβιτη....ευχαριστω πολυ

ekabitis είπε...

Να 'σαι καλά 9,62

Unknown είπε...

φιλε μου κατι δεν παει καλα με τους κωδικους που δινεις για τριτη φορα προσπαθησα αλλα δεν υπαρχουν
μηπως εχουν αλλαξη;για ψαξτο παντως σ ευχαριστουμε εισαι πρωτος

ekabitis είπε...

Φίλε Gorbi, ο κωδικός είναι εντάξει. Κοίτα μήπως κάνεις κάτι λάθος, για παράδειγμα μην ξεχάσεις να βάλεις τικ στο "επέκταση προτύπων γραφικών στοιχείων". Τέλος υπάρχει και μία πολύ μικρή περίπτωση να μην το δέχεται το template που χρησιμοποιείς.
Ευχαριστώ πολύ πάντως για τα καλά σου λόγια, αλλά και για το mail που έστειλες.

topsecret είπε...

file dn vriskw ti grammi..analutika..a xpr:href='data:post.url'></ato epsaksa analutika..
auto einai to blog m
http://nifitsa-enimerwsi.blogspot.com/

to mono pou exei sxesi einai auto Variable name="post.title.font" description="Title Font" type="font"
default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 20px Verdana, Geneva, sans-serif

ekabitis είπε...

e-nifitsa,
συνεχώς βγαίνουν καινούρια templates τα οποία έχουν πολύ διαφορετική δομή από τα παλαιότερα.
Αποτέλεσμα αυτού είναι οι κώδικες της κάθε σελίδας να είναι πολύ διαφορετική από μία άλλη παλαιότερη.
Τέλος πάντων.
Αφού πάρεις ένα αντίγραφο του blog σου, ψάξε για
class='post-title entry-title
Αντέγραψε την παράγραφο που βρίσκεται μέσα στο >h> με τον παρακάτω κωδικό.
<h3 class='post-title entry-title'>
<a href='http://nifitsa-enimerwsi.blogspot.com/'><img src='Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ' style='float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 32px; height: 32px;'/></a>
</h3>
Κάνε τις απαιτούμενες αλλαγές.
Δεν σου εγγυώμαι ότι θα λειτουργήσει αλλά κάνε μια προσπάθεια.
Μην ξεχάσεις να πάρεις αντίγραφο του blog σου στην αρχή για παν ενδεχόμενο.

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