ΠΡΟΣΘΗΚΗ MENU BAR

Πριν από καιρό ένας φίλος-αναγνώστης του blog μου έστειλε email και μου ζήτησε να κάνω μια ανάρτηση για το πως προστίθεται μια μπάρα - μενού (ή navbar αν θέλετε να το πείτε). Ζητώ συγνώμη για την καθυστέρηση αλλά υπήρξαν κάποια τεχνικά προβλήματα για δυο εβδομάδες και όλες οι προγραμματισμένες αναρτήσεις πήγαν πίσω.
Μπαίνουμε στο λογαριασμό μας και από εκεί πάμε διάταξη και επεξεργασία HTML. Πριν κάνουμε οτιδήποτε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template μας για κάθε ενδεχόμενο. Μετά πατάμε Control και F (Ctrl+F) για να ανοίξει το ψαχτήρι στο κάτω μέρος της σελίδας. Πληκτρολογούμε /* Header */ ή /* Header και παρατηρούμε ότι στον κώδικα μας εμφανίζεται το κομμάτι που μας ενδιαφέρει τονισμένο με χρώμα. Αμέσως μετά από αυτό κάνουμε αντιγραφή - επικόλληση (copy - paste) το παρακάτω κομμάτι του κώδικα:

/* Header */ #newnavbar ul li{ font-size:100%; list-style-type: none; display:inline; padding:0px; margin:10px; border:0px solid; }

Το παραπάνω κομμάτι κώδικα δημιουργεί απλά links για τη μπάρα. Αν θέλετε κάτι με περισσότερο εφέ τότε αντικαταστείστε τον παραπάνω κώδικα με αυτόν:

/* Header */ #newnavbar ul li{ font-size:100%; list-style-type: none; display:inline; padding:0px; margin:10px; border:0px solid; } #newnavbar li a{ color:#dfffed; } #newnavbar li a:visited { color: #57E964; } #newnavbar li a:hover { color: #F88017; background: #ffff66; }

Τα μέρη του παραπάνω κώδικα που είναι τονισμένα με κόκκινο χρώμα αντιπροσωπεύουν τα χρώματα των links και μπορείτε να τα αλλάξετε σύμφωνα με τα γούστα σας με ένα color generator ή με έναν τρόπο μέσα από το blogspot που αναφέραμε και άλλες φορές στο blog και μπορείτε να δείτε αν κάνετε κλικ εδώ. Έτσι όπως είναι ο κώδικας τα χρώματα είναι προκαθορισμένα ως εξής: τα links είναι σε απαλό πράσινο χρώμα, τα επισκεπτόμενα σε φωτεινό πράσινο και όταν απλά βάζετε το ποντίκι σας πάνω από ένα link της navbar τα γράμματα αυτού είναι πορτοκαλί σε κίτρινο φόντο.
Μετά πάμε και βρίσκουμε με το ψαχτήρι το παρακάτω κομμάτι του κώδικα:

<div id='crosscol-wrapper' style='text-align:center'>

Κάτω από αυτόν βλέπουμε το παρακάτω κομμάτι του κώδικα.

<b:section class='crosscol' id='crosscol' showaddelement='yes'/> </div>

Το σημείο όπου λέει 'no' το αλλάζουμε σε 'yes' (αν παρατηρήσετε το έχουμε αλλάξει ήδη με κόκκινο χρώμα). Πατάμε αποθήκευση (save) και πάμε στον πανόπτη και από εκεί στη διάταξη. Παρατηρούμε ότι ανάμεσα στην κεφαλίδα (header) και στο κύριο μέρος όπου αντιπροσωπεύει τα posts (body) έχει προστεθεί μια προσθήκη gadget. Κάνουμε κλικ στην προσθήκη gadget και από εκεί επιλέγουμε HTML/JavaScript. Στο νέο παράθυρο που ανοίγει κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα:

<div id='newnavbar'> <ul> <li><a href="URL of Home page">Home</a></li> <li><a href="URL of Music page">Music</a></li> <li><a href="URL of Books page">Books</a></li> <li><a href="URL of Links page">Hot Links</a></li> <li><a href="URL of Profile page">About Me</a></li> <li><a href="mailto:EMAIL ADDRESS">Contact</a></li> </ul></div>

Δημιουργήσαμε έξι κατηγορίες (home, music, books, hot links, about me, contact). Με κόκκινο χρώμα στον κώδικα έχουμε τα ονόματα των κατηγοριών. Μπορείτε να τα αλλάξετε αν θέλετε ή να προσθέσετε και άλλη κατηγορία προσθέτοντας άλλη μια γραμμή:

<li><a href="URL of Profile page">category</a></li>

Mε μπλε χρώμα είναι τα URL όπου βρίσκεται η κάθε κατηγορία και εννοείται ότι πρέπει να τα αντικαταστήσετε. Για παράδειγμα στην κατηγορία home εκεί που λέει URL of Home page το αντικαθιστάτε με τη διεύθυνση του blog σας. Τέλος με μωβ χρώμα έχουμε το EMAIL ADDRESS όπου το αντικαθιστάτε με το email σας. Όταν τελειώσετε με τις αντικαταστάσεις πατήστε αποθήκευση (save). Επισκευτείτε το blog σας και δείτε τα αποτελέσματα. Καλή επιτυχία.