Το κουμπί 'Read More' με εικόνα αντί για κείμενο

Γνωρίζουμε πως για να βάλουμε το Read More στις αναρτήσεις μας, ώστε να μην φαίνονται ολόκληρες στην αρχική μας σελίδα, αρκεί από τον blogger να πατήσουμε το εικονίδιο στην μπάρα εργαλείων, στο σημείο του κειμένου που θέλουμε να το διαχωρίσουμε. Εναλλακτικά γράφουμε στον κώδικα HTML του άρθρου το: <!--more-->


Στην προβολή των άρθρων του blog μας θα φαίνεται το 'Διαβάστε περισσότερα' ή 'Read more'.
Πάμε τώρα να δούμε πως θα αντικαταστήσουμε το κείμενο με μία εικόνα, ώστε να γίνει ομορφότερο το blog μας.





Από το αριστερό μενού του Blogger επιλέγουμε το [Πρότυπο] και [επεξεργασία HTML]

Με Ctrl + F αναζητούμε μέρος από τον παρακάτω κώδικα:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Μόλις τον βρούμε μέσα στον κώδικά μας, τον αντικαθιστούμε με το:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img align='right' alt='Διαβάστε περισσότερα »' border='0' src='ΕΙΚΟΝΑ'/></a>
</div>
</b:if>

  • Όπου ΕΙΚΟΝΑ βάζουμε το URL της εικόνας μας. 
  • Αν από τον παραπάνω κώδικα αφαιρέσουμε το #more από το &quot;#more&quot; τότε θα εμφανίζει το άρθρο από την αρχή και όχι μετά το read more.
  • Πατήστε [Αποθήκευση] και είστε έτοιμοi.

Σημείωση


Εάν δεν έχουμε ανεβασμένη την εικόνα μας σε κάποιο χώρο στο internet, τότε σε μία νέα ανάρτηση ανεβάζουμε την εικόνα, παίρνουμε το URL από τον κώδικα HTML του άρθρου μας και τον επικολλάμε παραπάνω. Η ανάρτησή μας δεν χρειάζεται να αποθηκευτεί. Όλες οι εικόνες που ανεβάζουμε στον Blogger αποθηκεύονται στο 'Λευκώματα Ιστού Picasa' για μελλοντική χρήση. Θυμίζω ότι για να πάρουμε το URL μιας εικόνας από το internet, αρκεί να κάνουμε δεξί κλικ επάνω της και μετά 'Αντιγραφή διεύθυνσης URL εικόνας'

Εάν δεν μπορείτε να σχεδιάσετε μόνοι σας ένα κουμπί, υπάρχουν πάρα πολλά στο internet και σίγουρα θα βρείτε ένα που θα ταιριάζει στη σελίδα σας. Δείτε μερικά εδώ ή εδώ (ψάξτε και με άλλες λέξεις-κλειδιά)

1 σχόλιο:

Δικά μου

Larissakid

Χρησιμοποιώ