05 Φεβρουαρίου 2010



6 Οριζόντιο CSS Menu στο Blog σας

Αμέτρητα μέχρι σήμερα τα email που δέχτηκα απο φίλους bloggers, για να κάνω ανάρτηση πώς βάζουμε οριζόντιο μενού με link επάνω ψηλά στο blog μας, κάτι παρόμοιο σαν αυτό που έχω κι εγώ. Σήμερα, αποφάσισα κλέβοντας χρόνο, να σας δείξω έναν απο τους τρόπους. Σημείωση: Δεν θα είναι "ολόιδιο" με το δικό μου, μα παρόμοιο, όπως δείχνει στην εικόνα: 1.Συνδεθείτε και πηγαίνετε στην ΔΙΑΤΑΞΗ--> Επεξεργασία HTML 2. Κάντε Scroll down και βρείτε το </head> tag . 3. Κάντε Copy τον κώδικα που ακολουθεί, και επικολήστε τον ακριβώς ΠΡΙΝ απο το </head> tag.
<style type='text/css'> #nav { width:100%; margin-left:-40px; background: url(http://image_link/mainbg.jpg) repeat-x; } #nav li { float: left; display: block; } #nav li a { float: left; display: block; padding: 12px 18px 12px 18px; text-transform: uppercase; text-decoration:none; background: url(http://image_link/navi-bg.jpg) no-repeat top right; color:#ffffff; } #nav li a:hover { background: url(http://image_link/navi-bg.jpg) no-repeat right -40px; color:#ffffff; text-decoration:none; } ul#nav li.current_page_item a, ul#nav li.current-cat a { color: #fff; background: url(http://image_link/navi-bg.jpg) no-repeat right -80px; } #nav li ul { display: none; } </style>
Προσοχή : 1. Κάντε Back Up το πρότυπό σας 2. Ανεβάστε κάπου τις παρακάτω α) mainbg.jpg και β) navi-bg.jpg εικόνες, και μετά βάλτε το direct link τους στην θέση των χρωματιστών γραμμάτων επάνω στον προηγούμενο κώδικα, ανάλογα πάντα με το χρώμα που βλέπετε. (δεξί κλίκ πάνω στην κάθε μία τους, και "Αποθήκευση ως.." και αποθηκεύοντάς τες με το υπάρχον όνομά τους. Κατόπιν ανεβάστε τις κάπου, και πάρτε το link τους). α) β) 4. Αποθηκεύστε το template σας. 5. Πηγαίνετε στην διάταξη, και κάντε click στο--> "προσθήκη gadget". 6. Επιλέξτε "Ηtml/java script" , επικολήστε τον επόμενο κώδικα, και πατήστε πάλι "Αποθήκευση προτύπου".
<ul id="nav"> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#" title="#">Aρχική</a></li> <li><a href="#" title="#">Φωτογραφίες</a></li> <li><a href="#" title="#">Άρθρα</a></li> <li><a href="#" title="#">Ποιήματα</a></li> <li><a href="#" title="#">About</a></li> <li><a href="#" title="#">Contact</a></li> </ul> <div class="clear"></div>
Τα παραπάνω link φυσικά, είναι απλά παραδείγματα. Μπορείτε να βάλετε ότι εσείς θέλετε, και όσα κουμπιά θέλετε, αντιγράφοντας κάθε φορά αυτήν την σειρά, και επικολώντας την απο κάτω απο τις άλλες ή ανάμεσά τους, όπως πάλι εσείς επιθυμείτε:
<li><a href="#" title="#">Ονομα_Link</a></li>
7. Αντικαταστήστε το "#" στο σημείο a href="#" title....κ.λ.π. με το URL της σελίδας, στην οποία θα οδηγείται όποιος πατήσει στο link μετά. 8. ..δέν έχει οχτώ.. τελειώσατε. Καλή επιτυχία!!
"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις,"




Print this post



Related Posts :



6 σχόλια:

Το Θολό Τοπίο...με ξεκάθαρη ματιά. είπε... Best Blogger Tips

Καλημέρα Δάσκαλε.:)
Να προσέχεις τον Νίκο.!!!


VAD είπε... Best Blogger Tips

Ρε κάπτεν,δε μου φτάνει το κάθετο,να βάλω και οριζόντιο;Σταυρόλεξο θα το κανω;:)))

Καλημέρααααα....


diktiakos είπε... Best Blogger Tips

Μια λέξη θα πω μονάχα... ΑΨΟΓΟΣ...
Σε ευχαριστώ πολύ


zoyzoy είπε... Best Blogger Tips

Αυτό το ήθελα από καιρό να χώσω μέσα τα βραβεία και άλλα αλλά θέλει το χρόνο του.
Οταν τα βρώ δύσκολα θα σε ενημερώσω!
Αν θέλεις
εδώ να μου απαντήσεις
Καλό ΣΒΚ!


Apokalipsis999 είπε... Best Blogger Tips

Νικόλα καλησπέρα,

Άμα βρεις και άλλα καλούδια για το blog, από ξένα blogs, ανάρτησέ τα, δίοτι αν μη τι άλλο, δεν υπάρχουν και πολλά blogs στα ελληνικά για όσους δεν τα πολυκαταφέρνουν με τα Εγγλέζικα... (μόνο το blog του Johnpatra γνωρίζω). Και η μετάφρασή τους είναι πολύτιμη! Διότι τουλάχιστον εδώ μπορούμε να εκφέρουμε κάποια απορία· τα εγγλέζικα δεν είναι το φόρτε μου... Οπότε συνέχισε!
Πάντως βάζε και την προέλευση της πηγής σου, ώστε να μη θίγεται ο κάθε ανώνυμος για λογαριασμό του ιδιοκτήτη του εγγλέζικου blog!
Και επειδή έγινα κοινωνός των... κοσμιτικών και παρόμοιων τινών χαρακτηρισμών, μπορεί κανείς να διαμαρτυρηθεί και κόσμια, λίγη αιδώς δεν έκανε κακό σε κανέναν.

Περί του κώδικα που δίνεις, έχω μια απορία:
Θέλω την οριζόντια μπάρα να τη βάλω κάτω από τη φωτό της επικεφαλίδας αλλά δυστυχώς τα gadget μου τα δίνει μόνο πάνω από το πλαίσιο της επικεφαλίδας! Καμιά ιδέα για το πως θα τη βάλω ανάμεσα στη φωτό της επικεφαλίδας και το πλαίσιο των αναρτήσεων;


AATON είπε... Best Blogger Tips

Αθάνατη Ελλάδα, που ποτέ δεν σου έλειψαν ούτε ποτέ θα σου λείψουν οι μίζεροι ρουφιάνοι.
Μόνο που στα παλιά χρόνια το έκαναν φανερά. Σήμερα φοράνε ανώνυμες μάσκες και παραφυλάνε στα σκοτεινά, σαν σύγχρονοι εφιάλτες, και σαν εφιάλτες υπογράφουν, σκούζοντας συνάμα για ...αντρισμούς και @@δια..!!
Τολμάνε μάλιστα να ισχυρίζονται πως έχουν και ιερά και όσια, κάτι για ιερές μαμάδες μου 'γραφε ο "ανώνυμους-κρυμένους-κρυμένους"..
Και οι Ινδοί θεωρούν ιερές τις αγελάδες, μα δεν με συγκίνησαν ποτέ ούτε αυτοί.

Το έχω τονίσει τόσες και τόσες φορές, μα ποτέ δεν θέλησαν να το καταλάβουν οι "κωλόπαιδοι".
Μεταφράζουμε (και εγώ, και ο John, και το Bloger Tips, και τόσοι άλλοι, κείμενα απο άλλες σελίδες στα Αγγλικά, για όλους όσους δεν γνωρίζουν καλά Αγγλικά.
Βοηθάμε στο στήσιμο κάποιων blogs, και στο διόρθωμα κάποιων τυχόν λαθών.

Δεν μπορεί να λέγεται άντρας ο μίζερος αυτός ρε σείς, η "μιζέρια" είναι θυλικού γένους.


Next Next Next