Κουμπι "Read More" και "Διαβαστε Περισσοτερα" (Πιο ευκολος Τροπος)

Παιδια σημερα βρηκα περα απο οτι σας βρηκα πως να βαλετε το κουμπι του Read More ευκολα και γρηγορα, ελυσα ενα προβλημα που ειχα με αυτο το κουμπι. Επειδη τοσο καιρο χρησιμοποιουσα διαφορα κουμπια Read More που παρολο που ηταν ας πουμε ευκολα στο να μπουν δεν ηταν ευκολα στο να τα χρησιμοποιω σε καθε μου αναρτηση. Τοσο καιρο εψαχνα σε πολλες ιστοσελιδες τσαμπα! Ενω την λυση την εχει το ιδιο το Blogger με εναν πολλη απλο τροπο οπου θα σας δειξω παρακατω.

1) Οπως παντα συνδεομαστε στο Blogger μας.

2) Καταρχας δεν ξερω αμα το ξερατε εγω το ειχα ακουστα αλλα τωρα το εμαθα πολλη καλα οτι το Blogger μας προσφερει απο μονο του ενα απλο Read More απο μονο του οπου θα δειτε στις παρακατω φωτογραφιες το πως δουλευει δειτε προσεχτικα.

3) Το θεμα ειναι ομως οτι αυτο δειχνει ενα απλο Read More και ετσι δεν ειναι κατι το σπουδαιο.

4) Χαρις ομως την βοηθεια του allblogtools μπορουμε τωρα να το επεξεργαστουμε κιολας και

    και να το κανουμε οτι θελουμε.

5) Ξεκιναμε λοιπον, αφου εχουμε συνδεθει στο Blogger μας παμε Σχεδιαση-Επεξεργασια HTML.

Προσοχή:

 -Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας).

6) Και ψαχνουμε για τον παρακατω κωδικα:

<data:post.body/>

7) Και επικολουμε τον παρακατω κωδικα:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

-Βεβαιωθητε οτι ο παραπανω κωδικα δεν υπαρχει ηδη.

8) Και τωρα παμε να τον επεξεργαστουμε.

9) Το μονο που μπορουμε να αλλαξουμε ειναι τα κοκκινα γραμματα

    δηλαδη αυτο που θα φαινεται στο Read More μας.

10) Τωρα αμα θελουμε να ειναι απλα ενα link απλα το αλλαζουμε

      ή το αφηνουμε ετσι οπως ειναι το Read More.

- Δηλαδη μπορουμε να το αντικαταστησουμε με "Διαβαστε Περισσοτερα"

   ή "Δειτε την συνεχεια" και γενικα με οτι θελουμε!

11) Βεβαια αμα θελουμε το κανουμε και εικονα 

     αντικαστοντας απλα το Read More με τον παρακατω κωδικα:

<img border="0" src="Paste here the button Image URL"/> 

12) Και φυσικα εκει που λεει Paste here the button Image URL βαζουμε 

      το Url της εικονας που θελουμε να δειχνει.

- Δειτε το παρακατω παραδειγμα:

 <img border="0" src="http://blackberry-soft.com

/wp-content/themes/elegant-box/images/readmore.gif "/> 

13) Τελος εχουμε επισης την ικανοτητα να ελενξουμε και το

       που θα ειναι αυτο το κουμπι.

14) Ειναι απλα απλα προσθετουμε οπως θα δειτε και το παρακατω

      κωδικα τα μπλε+γαλαζια γραμματα.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>

<p align="Left">Read More</p></a></div>
</b:if >
 

-Τα γαλαζια γραμματα τα αλλαζουμε αναλογα με το που 

  θελουμε να εμφανιζετε το κουμπι μας δηλαδη θελουμε

  αριστερα βαζουμε "Left" θελουμε δεξια βαζουμε "Right"

   και τελος θελουμε κεντρο βαζουμε "Center"

15) Αυτο ηταν εχουμε το κουμπι μας ετσι οπωςτο θελουμε , οπου το θελουμε

      και εκει που το θελουμε απλα, ευκολα και γρηγορα.

- Demo ειναι το παρακατω βιντεο:

- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του

κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.

- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή καντε παρακολουθηση.

  Ευχαριστω.

 Copyrights: BlogyTricks©

Πηγη κωδικα: Αllblogtools.com