Ένα διαχρονικό πρόβλημα που συναντούν οι bloggers είναι η εμφάνιση των μακροσκελών αναρτήσεων τους στην κεντρική σελίδα του blog τους με αποτέλεσμα ο επισκέπτης να χρειάζεται να σκρολάρει αρκετά κάτω στην σελίδα για να δει την επόμενη ανάρτηση. Επεμβαίνοντας στον κώδικα του προτύπου του blog σας μπορείτε να τοποθετήσετε κείμενο ή εικόνα readmore μετά από τους x (όσους ορίσετε εσείς) πρώτους χαρακτήρες κάθε ανάρτησης σας. Έτσι ο επισκέπτης θα πατάει το readmore για να διαβάσει ολόκληρη την ανάρτηση. Διαβάστε τα παρακάτω βήματα για να μάθετε πώς να το εφαρμόσετε στο δικό σας blog.Βήματα:
1
Επισκεφτείτε την σελίδα του Blogger http://www.blogger.com
2
Αν δεν είστε ήδη συνδεμένοι, πληκτρολογήστε τα στοιχεία σας και πατήστε το κουμπί Σύνδεση για να συνδεθείτε στον λογαριασμό σας.
3
Από την λίστα των blogs σας επιλέξτε εκείνο που θέλετε να εφαρμόσετε το readmore.
4
Από το κάθετο μενού στα δεξιά της σελίδας επιλέξτε Πρότυπο.
5
Έπειτα πατήστε το κουμπί Επεξεργασία HTML.
6
Αν σας εμφανιστεί κάποιο προειδοποιητικό μήνυμα πατήστε το κουμπί Συνέχεια
7
Στο παράθυρο που εμφανίζεται, τσεκάρετε το Επέκταση προτύπων γραφικών στοιχείων
8
Πατήστε τον συνδυασμό των κουμπιών του πληκτρολογίου σας Ctrl + F για να εμφανιστεί το πλαίσιο Εύρεσης (find) του browser σας και πληκτρολογήστε μέσα σε αυτό </head>. Αν χρειάζεται πατήστε Enter για να εντοπίσει το κείμενο που πληκτρολογήσατε μέσα στον κώδικα. Ο browser θα σας μεταφέρει στην γραμμή του κώδικα που εμφανίζεται το </head>.
9
Ανοίξτε το αρχείο readmore-function-code-blogger.txt και αντιγράψτε (επιλέξτε όλο τον κώδικα και πατήστε τον συνδυασμό του πληκτρολογίου σας Ctrl + c) τον κώδικα του script που περιέχει.
10
Επικολλήστε (πατήστε τον συνδυασμό Ctrl + v) τον κώδικα αυτόν ακριβώς πριν το </head>. Το αποτέλεσμα πρέπει να δείχνει όπως στην παρακάτω εικόνα
Εδώ πρέπει να εξηγήσω μερικές μεταβλητές του κώδικα ώστε να τις αλλάξετε και να προσαρμόσετε την συμπεριφορά του script στο δικό σας blog
Η μεταβλητή var thumbnail_mode = "no-float"; μπορεί να πάρει δύο τιμές:
την no-float η οποία εμφανίζει την ή τις εικόνες της ανάρτησης σας (πριν το σημείο που θα τοποθετηθεί το readmore) στο σημείο που εσείς έχετε ορίσει και
την τιμη float η οποία τοποθετεί τις εικόνες αριστερά του κειμένου (left float)
Η μεταβλητή summary_noimg = 430; προσδιορίζει τον αριθμό των χαρακτήρων που θα εμφανίζονται σε μια ανάρτηση πριν το readmore, η οποία δεν έχει εικόνα)
Η μεταβλητή summary_img = 340; προσδιορίζει τον αριθμό των χαρακτήρων που θα εμφανίζονται σε μια ανάρτηση πριν το readmore, η οποία περιέχει εικόνα)
Η μεταβλητη img_thumb_height = 120; Προσδιορίζει το ύψος (height) σε pixels των εικόνων (Thumbnails) πριν το readmore.
Ενώ η μεταβλητή img_thumb_width = 120; Προσδιορίζει το πλάτος (width) σε pixels των εικόνων (Thumbnails) πριν το readmore.
Εδώ πρέπει να εξηγήσω μερικές μεταβλητές του κώδικα ώστε να τις αλλάξετε και να προσαρμόσετε την συμπεριφορά του script στο δικό σας blog
Η μεταβλητή var thumbnail_mode = "no-float"; μπορεί να πάρει δύο τιμές:
την no-float η οποία εμφανίζει την ή τις εικόνες της ανάρτησης σας (πριν το σημείο που θα τοποθετηθεί το readmore) στο σημείο που εσείς έχετε ορίσει και
την τιμη float η οποία τοποθετεί τις εικόνες αριστερά του κειμένου (left float)
Η μεταβλητή summary_noimg = 430; προσδιορίζει τον αριθμό των χαρακτήρων που θα εμφανίζονται σε μια ανάρτηση πριν το readmore, η οποία δεν έχει εικόνα)
Η μεταβλητή summary_img = 340; προσδιορίζει τον αριθμό των χαρακτήρων που θα εμφανίζονται σε μια ανάρτηση πριν το readmore, η οποία περιέχει εικόνα)
Η μεταβλητη img_thumb_height = 120; Προσδιορίζει το ύψος (height) σε pixels των εικόνων (Thumbnails) πριν το readmore.
Ενώ η μεταβλητή img_thumb_width = 120; Προσδιορίζει το πλάτος (width) σε pixels των εικόνων (Thumbnails) πριν το readmore.
11
Πατήστε ξανά τον συνδυασμό των κουμπιών του πληκτρολογίου σας Ctrl + F για να εμφανιστεί το πλαίσιο Εύρεσης (find) του browser σας και πληκτρολογήστε μέσα σε αυτό <data:post.body/>.
12
Σβήστε το <data:post.body/> και αντιγράψτε και επικολλήστε τον κώδικα του αρχείου data-post-body-code.txt. Στον κώδικα αυτόν μπορείτε να αντικαταστήσετε το Read More στο σημείο που φαίνεται στην παρακάτω εικόνα με το κείμενο που θέλετε εσείς να εμφανίζεται, όπως Διαβάστε περισσότερα
13
Πατήστε ξανά τον συνδυασμό των κουμπιών του πληκτρολογίου σας Ctrl + F και εντοπίστε τον κώδικα </b:skin>.
14
Πριν το σημείο που εμφανίζεται το </b:skin> αντιγράψτε και επικολλήστε τις παρακάτω 3 γραμμές κώδικα
a.readmore {
/* CSS properties go here */
}
Αν γνωρίζεται CSS μπορείτε να διαμορφώσετε τον σύνδεσμο Read more
a.readmore {
/* CSS properties go here */
}
Αν γνωρίζεται CSS μπορείτε να διαμορφώσετε τον σύνδεσμο Read more
15
Τέλός πατήστε το κουμπί Αποθήκευση προτύπου και ανοίξτε το blog σας για να δείτε το αποτέλεσμα
Video
