12 Button / Κουμπι "Read More"

Νέοι bloggers γεια σας...

Σήμερα θα δούμε πως βάζουμε μια εικόνα, με "read more" (διαβάστε περισσότερα) εκεί που είναι το κείμενο "διαβάστε περισσότερα"...Πρώτα όμως κρατήστε οπωσδήποτε ένα αντίγραφο του κώδικα της σελίδας σας...

Συνδεόμαστε με τον Blogger, και στην Σχεδίαση => Επεξεργασία HTML, τσεκάρουμε το Επέκταση προτύπων γραφικών στοιχείων.Στη συνέχεια με τον γνωστό τρόπο Ctrl+F,ψάχνουμε να βρούμε το...

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'>Read More </a>

</div>

</b:if >

( *...εάν βρήκατε αυτόν τον κώδικα, προσπεράστε την υποσημείωση που βάζω...αλλά πριν προσπεράσετε, βεβαιωθείτε οτι η τρίτη σειρά του κώδικα, λέει :

1)   <a expr:href='data:post.url + "#more"'>Read More </a>

και όχι : 

2)  <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

αλλιώς αντικαταστήστε τη 2η φράση με την 1η...) 

Εάν λοιπόν δεν υπάρχει αυτός ο κώδικας που θέλουμε, ψάχνουμε με  (CTRL+F) και βρίσκουμε το : <data:post.body/>

και ακριβώς ΜΕΤΑ ΑΠΟ ΑΥΤΟ επικολλάμε τον κώδικα

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'>Read More </a>

</div>

</b:if >

...έτσι λοιπόν τώρα θα φαίνεται η φράση:  Read More

για να φανεί λοιπόν η εικόνα, πρέπει να βάλουμε  εκεί που είναι η μπλε φράση, τον παρακάτω κώδικα:

<img border="0" src="ΕΔΩ ΤΟ URL ΤΗΣ ΕΙΚΟΝΑΣ"/>

...έτσι θα φαίνεται σαν:  π.χ.: 

<img border="0" src="https://lh5.googleusercontent.com/-wVaGVVqPte4/TiKAPgGMruI/AAAAAAAABjg/EqpLYfVrfLk/MORE%2525202.jpg"/>

*εάν θέλετε να φαίνεται η εικόνα στη δεξιά η στην αριστερή πλευρά της ανάρτησης, πρέπει να διαλέξετε μία από τις 2 κόκκινες φράσεις που προσδιορίζουν την δεξιά η την αριστερή μεριά...

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><p align="Left"><img border="0" src="Paste here the button Image URL"/></p></a>

</div>

</b:if >

(αυτό θα το βάλει αριστερά).

ή

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src="Paste here the button Image URL"/></p></a>

</div>

</b:if >

(αυτό θα το βάλει δεξιά)

...αυτό ήταν !!!Κάντε ΠΡΟΕΠΙΣΚΌΠΙΣΗ και αν όλα δείχνουν εντάξει, πατήστε ΑΠΟΘΗΚΕΥΣΗ !!!

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

***Γιά να βρείτε εικόνες με read more, βάλτε τη φράση read more button στο google=>εικόνες...
Πληροφορίες από : royaltutor.net


{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}