Οριζόντιο μενού στο Blogger blog, εύκολα!

Προσθήκη απλού οριζόντιου μενού(horizontal menu) στο Blogger(blogspot) blog εύκολα, ΧΩΡΙΣ τροποποιήσεις του HTML template(προτύπου)! Αν αυτό που αναζητάτε είναι ένα απλό μενού, και δεν θέλετε να τροποποιήσετε ή να αλλάξετε το πρότυπο του blog, υπάρχει λύση τελικά.

Θα σας αναφέρω μια γρήγορη, εύκολη και ακίνδυνη μέθοδο όπου θα προσθέσουμε ένα gadget, το γνωστό HTML/JAVASCRIPT από το "Προσθήκη Gadget". Μετά θα αντιγράψετε 2-3 γραμμές κώδικα που θα σας δώσω αμέσως παρακάτω και τελειώσατε. Το οριζόντιο μενού για το blog θα είναι έτοιμο. Το αποτέλεσμα θα είναι ένα παρόμοιο μενού με αυτό της εικόνας μας αριστερά(κλικ για μεγέθυνση). Αν θέλετε, θα μπορέσετε να αλλάξετε το χρώμα του κειμένου, να το μετακινήσετε λίγο πάνω λίγο κάτω, να το στοιχίσετε αριστερά ή δεξιά και να μεγαλώσετε ή μικρύνετε τα γράμματα.

Λοιπόν, ξεκινάμε! Πρώτα κάντε backup το πρότυπο σας για κάθε ενδεχόμενο όπως κάνετε πάντα, έτσι; Μετά, κλικ στο "Προσθήκη HTML/Javascript gadget:

Εμφανίζει μια λίστα με gadget. Κλικ στο HTML/Javascript(κλικ στο +):

Έτσι λοιπόν σας προσέθεσε στη αριστερή ή δεξιά στήλη, ανάλογα πως είναι το blog σας, ένα κενό gadget πάνω-πάνω. Θα προσθέσουμε σε λίγο τον κώδικα και θα μεταμορφωθεί σε οριζόντιο μενού.

Κλικ τώρα στο επεξεργασία(edit). Θα σας ανίξει το παρακάτω παράθυρο:

Καταρχήν, σβήστε τον τίτλο(title), όπως ακριβώς φαίνεται στην παραπάνω εικόνα. Τώρα θα σας πω τι θα αντιγράψετε στο μεγάλο κουτί. Ελαχιστοποιείστε το παράθυρο προς το παρόν.

Γράφοντας τον HTML κώδικα με λίγο CSS(απ, τι είναι πάλι αυτό;)

Ανοίξτε το Σημειωματάριο στα Windows(Notepad) ή άλλον text editor. Αντιγράψτε προσεκτικά τον παρακάτω κώδικα.

     <div style="font-size:larger; font-weight:bolder;">
       <a href="http://www.google.com">Google | </a>
       <a href="http://www.yahoo.com">Yahoo | </a>
       <a href="http://flickr.com">Flickr | </a>
       <a href="http://youtube.com">Youtube | </a>
       <a href="http://www.facebook.com">Facebook | </a>
       <a href="http://www.twitter.com" style="text-decoration:none;color:black;">Twitter</a>

     </div>

Όπως καταλαβαίνετε, ο παραπάνω κώδικας HTML / CSS αντιπροσωπεύει αυτό που είδατε στην πρώτη φωτογραφία αυτού του άρθρου. Δηλαδή, ένα μενού με links τις ιστοσελίδες Google, Yahoo κλπ.

Ο τελευταίος σύνδεσμος-ως παράδειγμα- δείχνει πως αλλάζω ΧΡΩΜΑ στα γράμματα του συγκεκριμένου link και ο σύνδεσμος δεν θα είναι υπογραμμισμένος

Για να ξεκαθαρίσουμε: Σε κάθε γραμμή εκτός των 2 γραμμών που περιέχουν τη λέξη div(πρώτη και τελευταία), στον παραπάνω κώδικα, μέσα σε σε εισαγωγικά βρίσκεται η διεύθυνση που μας ενδιαφέρει. Πχ η πρώτη διεύθυνση είναι http://www.google.com. Μετά, στην ίδια γραμμή, βλέπουμε τη λέξη Google. Έτσι, η λέξη Google αυτόματα μετατράπηκε σε link(σύνδεσμο) του μενού που φτιάχνουμε. Δεν το βλέπετε στο Σημειωματάριο τώρα, αλλά θα το δείτε στο blog σε λίγο!

Δεν το θέλετε αυτό: Δεν θέλουμε πιθανότατα τα Google, Yahoo κλπ ως στοιχεία του μενού μας. Αλλάξτε λοιπόν τις διευθύνσεις που αντιγράψατε στο Σημειωματάριο και βάλτε αυτές που σας ενδιαφέρουν. Για παράδειγμα, εμένα θα με ενδιέφερε να βάλω ως διευθύνσεις, διευθύνσεις ετικετών. Ξέρετε, κατηγορίες. Δείτε πάνω δεξιά στο blog αυτό, εκεί που λέει Κατηγορίες άρθρων. Περάστε το ποντίκι πάνω από μία ετικέτα και δείτε κάτω-κάτω στο browser, έχουν διεύθυνση οι ετικέτες. Οι ετικέτες αντιπροσωπεύουν κατηγορίες άρθρων και βοηθάνε τους επισκέπτες που ζητάνε πληροφορίες. Ξέρετε , τις προσθέτετε στα άρθρα σας έτσι; (Διαβάστε το άρθρο μου που αναφέρεται και στις ετικέτες, και το άρθρο για το πως προσθέτω gadget ετικετών).

Αντιγράψτε  λοιπόν μια διεύθυνση ετικέτας που σας ενδιαφέρει(με δεξί κλικ επάνω στην ετικέτα, αντιγραφή διεύθυνσης) από το blog σας και σβήνοντας στο Σημειοματάριο μόνο το http://www.google.com(όχι τα εισαγωγικά) βάλτε στη θέση του την διεύθυνση της ετικέτας. Σβήστε τώρα τη λέξη Google και γράψτε το ΟΝΟΜΑ της συγκεκριμένης ετικέτας σας. Προχωρήστε στα υπόλοιπα στοιχεία του μενού(γραμμές είπαμε). Αν σας φαίνονται πολλά τα στοιχεία σβήστε όσες γραμμές θέλετε. Αν σας φαίνονται λίγα, προσθέστε παρόμοιες γραμμές.

Φυσικά, σαν σύνδεσμο μπορείτε να βάλετε ότι θέλετε, όχι μόνο ετικέτες.

Τώρα, να σας πω τι κάνει η πρώτη πρώτη γραμμή. Καταρχήν το div από μόνο του δεν κάνει πολλά. Ας πούμε ότι ξεκινά το μενού.Προσθέτουμε το style οπότε αλλάζουμε στυλ στο μενού. Το "font-size:larger" όπως καταλάβατε μεγαλώνει τα γράμματα του μενού. Πόσο τα μεγαλώνει; Λίγο μεγαλύτερα από το κείμενο του άρθρου σας. Αν δεν θέλετε να μεγαλώσει σβήστε το "font-size:larger; ". Το "font-weight:bolder"  κάνει λίγο πιο bold(πιο μαύρα) τα γράμματα του μενού σας.

Αν προσθέτατε τώρα το color:blue στο τέλος της γραμμής div, μετά το bolder; δηλαδή, τα γράμματα του μενού θα γίνουν μπλε. Αν προαθέσετε margin-top:25px το μενού θα μετακινηθεί λίγο κάτω, μαζί με το κείμενο του μπλογκ. Το νούμερο μπορεί να αλλάξει. Αντιθέτως το margin-bottom:25px αυξάνει την απόσταση μενού και τίτλου άρθρου.

Το blog σας, πιθανότατα, θα στοιχίσει το οριζόντιο μενού στο κέντρο. Θα το κεντράρει. Αν δεν το κάνει προσθέστε το text-align:center. Αν θέλετε στοίχιση αριστερά text-align:left. 

Το font-size μπορεί να πάρει, σύμφωνα με το γούστο σας, τις τιμές:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• smaller
• larger

Αν δεν θέλετε να είναι υπογραμμισμένα τα στοιχεία του μενού, θα προσθέσετε το style=" text-decoration: none;" σε κάθε ένα στοιχείο του μενού. Πχ a href="http://www.sotostips.gr/p/about-sotostips.html" style=" text-decoration: none;".

Αφού κάνετε τις αλλαγές, αντιγράψτε(copy) όλο το κείμενο από το Σημειοματάριο και μεγιστοποιείστε το παράθυρο του gadget. Κάντε επικόλληση(paste) και κλικ στο Save(Αποθήκευση).

Τελευταίο βήμα και σημαντικό! Αρπάξτε,  πατώντας το αριστερό κουμπί του ποντικιού το gadget που προσθέσατε στη στήλη κα μεταφέρετε το πάνω από τα άρθρα. Αφήστε το κουμπί:

Το αποτέλεσμα θα είναι:

Κλικ αποθήκευση(save)!

Προφανώς, το οριζόντιο μενού για το Blogger blog(blogspot) μας δεν είναι φανταχτερό. Δείτε το, το έχουμε κι εδώ πάνω-πάνω στο blog. Είναι όμως λειτουργικό και εμφανίζεται συνεχώς, όποιο άρθρο και να διαβάζουμε, όπως και στην αρχική σελίδα. Μια παρατήρηση: Πριν φτιάξετε μενού με ετικέτες, βεβαιωθείτε ότι μπαίνουν εκεί που πρέπει οι ετικέτες. Ελέγξτε τα άρθρα(αναρτήσεις) σας και αν είναι ανάγκη προσθέστε αφαιρέστε κατάλληλες ετικέτες. Όταν δημοσιεύετε ξανά δείτε αν μπήκε σωστά με την παλιά ημερομηνία το άρθρο.

Σημείωση: Στο screenshot δείχνω ότι μετακινώ το html gadget σε λάθος σημείο. Μετακινήστε το αμέσως κάτω από τον τίτλο του μπλογκ σας, αν θέλετε!

Σημαντικό!! Δείτε επίσης και πως συμπεριλαμβάνουμε στατικές σελίδες στο μενού που φτιάξαμε.

Licensed under a Creative Commons Attribution-Noncommercial 3.0 Greece License