Πως βάζουμε κάτω από τον τίτλο του blog μας μια μπάρα - μενού με καρτέλες - link?

Κατόπιν από ερώτηση αναγνώστη θα γράψω την παρακάτω ανάρτηση που σκοπό έχει εκτός να λύσει την δικιά του απορία ,να βοηθήσει κι εσάς που τυχόν να έχετε την ίδια απορία.
Πρόκειται να σας πω πως μπορείτε να φτιάξετε κι εσείς μια μπάρα - μενού που να περιέχει καρτέλες - συνδέσμους κάτω από τον τίτλο του blog μας.Για να καταλάβετε τι εννοώ δείτε (όπως στην φωτογραφία) στο δικό μου blog κάτω από τον τίτλο που έχει μια σειρά από links(facebook,myspace,hi5 κτλπ...).
Αυτό ακριβώς θα σας πω παρακάτω.

Να πω επίσης ότι αυτό το trick το είδα και το έμαθα εγώ πρώτη φορά από το φιλικό blog locusblogus.
Αν έχετε minima template καλώς.Για τα άλλα δεν εγγυώμαι την επιτυχία αλλά καλό είναι να δοκιμάσουν και να μου πουν αφήνοντάς μου ένα σχόλιο.

Ακολουθήστε τα παρακάτω βήματα.



1)Σύνδεση στον λογαριασμό σας στον blogger.com

2)Διάταξη

3)Επεξεργασία html

4)Λήψη πλήρους προτύπου(back up) για κάθε ενδεχόμενο

5)Πατάμε ctrl + F για να ανοίξει κάτω χαμηλά το εργαλείο όπου αναζητούμε τους κώδικές μας

6)Ψάχνουμε να βρούμε το /* Header */ ή το /* Header

7)Μετά από αυτό βάζουμε τον παρακάτω κώδικα

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


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

/* 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 που μπορείτε να δείτε αν κάνετε κλικ εδώ. Έτσι όπως είναι ο κώδικας τα χρώματα είναι προκαθορισμένα ως εξής: τα links είναι σε απαλό πράσινο χρώμα, τα επισκεπτόμενα σε φωτεινό πράσινο και όταν απλά βάζετε το ποντίκι σας πάνω από ένα link της navbar τα γράμματα αυτού είναι πορτοκαλί σε κίτρινο φόντο.

8)Πάμε τώρα να βρούμε τον παρακάτω κώδικα:

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


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

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

Το σημείο όπου λέει 'no' το αλλάζουμε σε 'yes' (αν παρατηρήσετε το έχουμε αλλάξει ήδη με κόκκινο χρώμα).

9)Πατάμε αποθήκευση

10)Πατάμε εκεί που λέει "Στοιχεία σελιδας" ή "Διάταξη"

11)Βλέπουμε κάτω από τον τίτλο του ιστιολογίου μας ότι έχει ήδη προστεθεί μια μπάρα που λέει "Προσθήκη gadget"

12)Πατάμε "Προσθήκη gadget" και επιλέγουμε HTML/JavaScript

13)Εκεί μέσα κάνουμε επικόλληση τον παρακάτω κώδικα


<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 σας και δείτε τα αποτελέσματα.

Άφησε μου ένα σχόλιο και πες μου τις εντυπώσεις σου.