Πώς θα αντικαταστήσω τους συνδέσμους "Νεότερη/Παλαιότερη ανάρτηση" με εικόνες;


έτσι φαίνεται η προεπιλογή

Έχετε δει, φαντάζομαι, διάφορες σελίδες που, αντί για το απλό κείμενο "Νεότερη Ανάρτηση" "Αρχική" και "Παλαιότερη Ανάρτηση", έχουν στο κάτω μέρος της σελίδες τους χαριτωμένες εικόνες, κυρίως με βελάκια.


Θα σας δείξω πώς να το κάνετε. Περιλαμβάνει επεξεργασία του κώδικα HTML του template μας, γι' αυτό πριν κάνουμε οτιδήποτε, δημιουργούμε ένα αντίγραφο ασφαλείας.
Ωστόσο, μην αποθαρρύνεστε με την HTML, είναι από τις πιο εύκολες παρεμβάσεις που μπορεί να κάνει άνετα και ένας αρχάριος, αν ακολουθήσει πιστά τις οδηγίες μου.
1. Πάμε "Επεξεργασία HTML".
πως θα βρείτε την επιλογή επεξεργασία html
2. Κάνουμε κλικ μέσα στο κείμενο του κώδικα (οπουδήποτε) και πληκτρολογούμε CTRL+F. Μέσα στο πεδίο αναζήτησης που θα εμφανιστεί, κάνουμε επικόλληση το κείμενο:
<b:includable id='nextprev'>
και πατάμε Enter. Θα μας πάει αυτόματα στο σημείο που βρίσκεται ο συγκεκριμένος κώδικας. Θα είναι κάπως έτσι:

ο κώδικας για τους συνδέσμους

Τώρα, τα σημεία που έχω υπογραμμίσει με κόκκινο, θα τα αντικαταστήσουμε με το σύνδεσμο της εικόνας που θέλουμε να βάλουμε στη θέση του κειμένου. 
Τα βελάκια που δείχνουν προς τα δεξιά είναι για τις παλαιότερες αναρτήσεις (olderPageTitle) και τα βελάκια που δείχνουν προς τα αριστερά για τις νεότερες (newerPageTitle).
Μπορείτε να βάλετε όποιες εικόνες θέλετε, αρκεί να είναι μικρές σε μέγεθος (περίπου 45px X 45px).
Για να σας διευκολύνω, έφτιαξα μερικά σετ  στο Photoshop, για να τις χρησιμοποιήσετε ελεύθερα στο blog σας. 
Ωστόσο, δεν τελειώσαμε ακόμα. Στη θέση του υπογραμμισμένου κειμένου, δε θα βάλουμε απλούς συνδέσμους, αλλά θα τους περικλείσουμε μέσα σε ένα tag εικόνας (img tag), για να ξέρει ο browser ότι πρόκειται για εικόνες.
Είναι απλό:
Αντικαταστήστε το πράσινο κείμενο:

<data:newerPageTitle/> 
<data:olderPageTitle/> 
<data:homeMsg/>

και τις τρεις φορές με το εξής:

<img src = "#" />

Στη θέση του #, θα μπει η διεύθυνση url της εικόνας που θέλετε.

Θα έχετε στο τέλος κάτι τέτοιο:

έτσι θα είναι ο κώδικας μετά τις αλλαγές
















Αν θέλετε να βάλετε δικές σας εικόνες, πρέπει να ακολουθήσετε τα παραπάνω βήματα.

Προσοχή:

1. Μην ξεχάσετε το img tag γύρω από τους συνδέσμους των εικόνων σας.
2. Ανεβάστε τις εικόνες σας στα album Picasa/Google+ και χρησιμοποιήστε τους συνδέσμους τους.
3. Οι εικόνες που θα χρησιμοποιήσετε να είναι περίπου 45X45px. Αν είναι πολύ μεγαλύτερες θα καταλήξετε με κάτι τέτοιο:

να τι συμβαίνει αν η εικόνα σας είναι μεγάλη
Χαχαχαχα!

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

1ο σετ: πράσινα βελάκια





2o σετ: φούξια βελάκια





3o σετ: μπλε βελάκια






Αυτά προς το παρόν. Αν προκύψουν κι άλλα εικονίδια, θα τα αναρτήσω όλα μαζί σε καινούργια ανάρτηση!
Για τυχόν απορίες ή  προτάσεις θα με βρείτε στο: Ρωτήστε με!

Tip: μπορείτε να συνδυάσετε τα τρία παραπάνω χρώματα, για ένα πιο τρελό αποτέλεσμα. Παράδειγμα:

συνδυάστε τα χρώματα των εικόνων

Σχόλια

  1. τι ενδιαφέρονται πράγματα βάζεις εδώ!! χρειάζονται πολύ μελέτη.. νασαι καλά!!!

    ΑπάντησηΔιαγραφή
  2. Εχέτε ένα εξαιρετίκο blog και σας ακολουθω στο blogloving.ειμαι ο daddycool κατα κόσμο Χρηστος και ξεκίνησα τα πρώτα μου δειλά βήματα στη blogoσφαιρα,μετα απο τη προτροπη της γυναικας μου!!!!Αν θέλετε περάστε και μια βόλτα απο το δικό μου φιλια!!!! http://daddycool2403.blogspot.gr/

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

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

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

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

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

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