Read More in Posts

Πως να εισάγετε το "Διαβάστε περισσότερα" στο Blogger

Αναρτήθηκε από Σοφία | στις Τρίτη, Μαρτίου 30, 2010

Μετά από αρκετά μηνύματα που δέχτηκα από τους αναγνώστες μου ,που ρωτούσαν πως θα βάλουν την δυνατότητα  "Διαβάστε περισσότερα"  η  "Read more" στις αναρτήσεις , πήρα την αφορμή για αυτήν την ανάρτηση  .

Υπάρχουν δυο τρόποι για να εισάγετε ένα "Διαβάστε περισσότερα"  στις αναρτήσεις σας.


Πρώτα απ'ολα σιγουρευτείτε ότι χρησιμοποιήτε το Ενημερωμένο πρόγραμμα επεξεργασίας .
Για να το κάνετε αυτό πηγαίνετε  στο Πρόχειρο Blogger  και κάνετε Login login στο λογαριασμό σας
Από την καρτέλα του Πανόπτη πατάτε  Ρυθμίσεις -> Βασικό

Πλοηγηθείτε  στην σελίδα προς τα κάτω , μέχρι να βρείτε : Γενικές Ρυθμίσεις (Ισχύει για όλα τα ιστολόγιά σας.) 

- Από κάτω ακριβώς, θα δείτε μια επιλογή :  Επιλογή προγράμματος επεξεργασίας ανάρτησης
- Επιλέγετε  το πρώτο : Ενημερωμένο πρόγραμμα επεξεργασίας

  Πατήστε Αποθήκευση ρυθμίσεων

Τώρα πηγαίνετε στην καρτέλα Ανάρτηση -> Νεα Ανάρτηση

 Θα παρατηρήσετε το εικονίδιο  "Εισαγωγή Μεταπήδησης "  στην γραμμή εργαλείων του επιμελητή. Κάντε κλικ στο εικονίδιο αυτό και το "Διαβάστε περισσότερα" θα πρέπει να προστεθεί στο blog σας στη θέση του κέρσορα σας.

Τώρα , όταν θα γράψετε  μια ανάρτηση , επιλέξτε στην ανάρτηση σας το σημείο που θέλετε να χωρίσετε την ανάρτηση σας  και πατήστε το εικονίδιο  "Εισαγωγή Μεταπήδησης " 

Θα φαίνεται κάπως έτσι :

Το κείμενο πάνω από την γραμμή μεταπήδησης θα φαίνεται στην πρώτη σελίδα σας και για να διαβάσετε το υπόλοιπο  κείμενο θα πρέπει να πατήσετε το "Διαβάστε περισσότερα" 

Εάν δεν χρησιμοποιήσετε το νέο επεξεργαστή αναρτήσεων, μπορείτε να εισαγάγετε το "Διαβάστε περισσότερα" με το χέρι , απλά πατήστε   στην Επεξεργασία HTML  και  προσθέστε το  <! - more-> όπου θέλετε να χωρίσετε την ανάρτηση.

Αν θέλετε να αλλάξετε το κείμενο  "Διαβάστε περισσότερα"  σε κάτι άλλο . Κανένα πρόβλημα... Μπορείτε να επεξεργαστείτε το κείμενο "Διαβάστε περισσότερα"  κάνοντας κλικ Διάταξη-> Στοιχεία Σελίδας και στη συνέχεια πατήστε Επεξεργασία   στο κύριος σώμα του blog Αναρτήσεις ιστολογίου

 Θα ανοίξει ένα παραθυράκι " Διαμόρφωση αναρτήσεων ιστολογίου" και εκεί στην δεύτερη σειρά θα δείτε το κείμενο  "Διαβάστε περισσότερα"  , σβηστέ το κείμενο αυτό και γράψτε στην θέση του αυτό που εσείς θέλετε 

Ενημέρωση: Οι χρήστες που έχουν ιδιαίτερα εξατομικευμένα πρότυπα: Μπορεί να χρειαστεί να επεξεργαστείτε HTML σας για να μπορέσετε να εισάγετε το "Διαβάστε περισσότερα" .
 Κατ 'αρχάς, αποθηκεύετε ένα αντίγραφο ασφαλείας απο το πρότυπό σας,στη συνέχεια, ακολουθήστε τις οδηγίες που σας δίνω παρακάτω :

1. Κάντε log in στο Blogger  λογαριασμό σας
2 . πηγαίνετε  Διάταξη -> Επεξεργασία HTML  και πατήστε στο κουτάκι  -> Επέκταση προτύπων γραφικών στοιχείων 

 Τώρα , πατήστε στο πληκτρολόγιο σας το CTRL+F και στο κουτάκι που θα εμφανιστεί εισάγετε  τον παρακάτω κώδικα και πατήστε Εύρεση

 <data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Αντιγράψτε τον παρακάτω κώδικα  και κολλήστε τον ακριβώς κάτω από  τον παραπάνω κώδικα :

<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>

Δείτε την εικόνα παρακάτω :

 Κάνετε Αποθήκευση προτύπου ..

Έτοιμο !!!!!!!

Αν θέλετε να αλλάξετε το κείμενο  "Διαβάστε περισσότερα"  , ακολουθήστε τα ίδια βήματα που γράφω παραπάνω !!!

 Στολίστε το link "Διαβάστε περισσότερα" : 

1 . Εικόνα αντί για απλό κείμενο :

Αν θέλετε αντί για απλό κείμενο "Διαβάστε περισσότερα" να χρησιμοποιήσετε μια εικόνα τότε κάνετε το εξής :

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

<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>

2 . Τώρα αντικαταστήστε το σημείο με το κόκκινο χρώμα στον κώδικα και  το με τον κώδικα της εικόνας σας :

<img border="0" src="Κολλήστε εδώ το  URL της Εικόνας σας "/>

Δηλαδή έτσι :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img border="0" src="Κολλήστε εδώ το  URL της Εικόνας σας "/></a>
</div>
</b:if>

Αν θέλετε η εικόνα να φαίνεται δεξιά  η αριστερά απλά προσθέστε τους κωδικούς που βλέπετε με το μπλε χρώμα :

 <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><p align="left"> <img border="0" src="Κολλήστε εδώ το  URL της Εικόνας σας "/> </p> </a>
</div>
</b:if>

Αν θέλετε να φαίνεται δεξιά τότε :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><p align="right"> <img border="0" src="Κολλήστε εδώ το  URL της Εικόνας σας "/> </p> </a>
</div>
</b:if>

Όταν τελειώσετε , πατήστε Προεπισκοπηση και αν είναι όλα εντάξει πατήστε Αποθήκευση .


Αν δεν θέλετε να χρησιμοποιήσετε Εικόνα , όμως θέλετε να φαίνεται σαν Εικόνα ( δείτε το Read More στο πρότυπο μου )  τότε θα κάνετε το εξής :

Για να δημιουργήσετε "ψευτο-κουμπί "  για το κείμενο "Διαβάστε περισσότερα" θα το κάνετε προσθέτοντας  CSS κωδικούς :

 1 . Βρείτε στο πρότυπο σας την ετικέτα  ]]></b:skin>  , και κολλήστε ακριβώς από πάνω τον παρακάτω κώδικα :

.jump-link{font-size:12px;}
.jump-link a {
padding: 4px 15px;
background: #8c0311;
color: #fff;
text-decoration: none;
}
.jump-link a:hover {
background-color: #6a010e;
}
 

 #8c0311 - Είναι το χρώμα υπόβαθρου , στην συγκεκριμένη περίπτωση είναι το Κόκκινο 

 #fff - Είναι το χρώμα κείμενου , στην περίπτωση αυτή είναι το Άσπρο  

 #6a010e - Είναι το hover χρώμα υπόβαθρου , δηλαδή το χρώμα υπόβαθρου με το πέρασμα του ποντικιού , στην περίπτωση αυτή είναι το σκούρο Κόκκινο  

Αλλάζετε τα χρώματα ανάλογα με τις ανάγκες σας  , για να δείτε όλο το Χρωματολόγιο πατήστε εδώ  .

Αν θέλετε να δείτε πως θα φαίνεται , απλά δείτε το  Read More στο πρότυπο μου .


Όταν τελειώσετε πατήστε Αποθήκευση !

http://bloggertrics.blogspot.gr/2010/03/blogger_30.html

http://posftiaxnoblog.blogspot.gr/2013/08/read-more-automato-blogger.html

http://www.bloggertricks.gr/2011/04/automatic-read-more.html

http://blogytricks.blogspot.gr/2011/07/read-more_7840.html