Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Τρίτη, Μαρτίου 30

10

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

Μετά από αρκετά μηνύματα που δέχτηκα από τους αναγνώστες μου ,που ρωτούσαν πως θα βάλουν την δυνατότητα  "Διαβάστε περισσότερα"  η  "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 στο πρότυπο μου .


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

10:

ekabitis είπε...

Πολύ καλό Σοφία, και με πολύ μεγάλη σαφήνεια γραμμένο. Μπράβο.
Να ευχηθώ επίσης Καλό Πάσχα. Ότι επιθυμείς. Να χαίρεσαι αυτούς που αγαπάς.

BbisbosS είπε...

Πασχαλινές δέξου ευχές, απο τη καρδια βγαλμένες, ολες οι μέρες της ζωής να΄ναι αναστημένες!


Χρόνια Πολλά !!!!

diomidis είπε...

μια ερωτηση: αν το κανω με τον τροπο που περιγραφεις θα εφαρμοστε σε ολα τα ιστολογια μου;

bloggertrics είπε...

Καλησπερα σου και Χριστος Ανεστη !!

Σ'ευχαριστω για τα καλα σου λογια . Να εισαι καλα  :-D  

bloggertrics είπε...

<span>Καλησπερα  <span> :) <span> Χριστος Ανεστη !!</span></span></span>

Σ<span>ε ευχαριστώ πολύ για τις ευχέςσου!</span>
<span>Σου στελνω κ'εγω ολη μου τη θετικη ενεργεια κ τις καλυτερες ευχες μου.Ελπιζω να πιασουν! ... <span> :* </span></span>

bloggertrics είπε...

Καλησπερα και Χριστος Αναστη !!

Οχι , δεν θα εφαρμοστει σε ολα τα blogs σου , θα εφαρμοστει μονο σε εκεινο που θα κανεις την εφαρμογη .

diomidis είπε...

και κατι ακομα, το read more θα εφαρμοστει και στις παλιοτερες αναρτησεις;

bloggertrics είπε...

Diomidi μου καλησπερα 

Ναι , θα εφαρμοστει σε ολες τις αναρτησεις
Και στις παλιες και στις καινουργιες  :-D

Απλα δεν θα εφαρμοστει αυτοματα στις αναρτησεις , πρεπει να πατησεις το εικονιδιο επεξεργασιας αναρτησης  ( το μολυβακι ) θα το βρεις προς το τελος της αναρτησης και μετα θα επιλεξεις στο σημειο που θελεις να χωρισεις την αναρτηση και σε εκεινο το σημειο θα πατησεις το εικονιδιο read more  .
Μετα δημοσιευεις την αναρτηση κανονικα .
Η ιδια διαδικασια θα ακολουθηθει για ολες τις αναρτησεις  :-D

Panagiotis k. είπε...

Den pezese !!!!!!  thanks Panagiotis k.

bloggertrics είπε...

Να είσαι καλά Παναγιώτη :* O:-)

Σ'ευχαριστω πολύ !!!!!

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS