Menu στο Blog

Έχουμε δει πολλά blog σήμερα να φαίνονται σαν κανονικές σελίδες σε αυτό βοηθαει και το στήσιμο του blog και βεβαία υπάρχει και το menu. Πολύ χρήσιμο ειδικά όταν θέλουμε να βάλουμε τα θέματα μας σε κατηγορίες.



Σήμερα θα σας δείξω πώς μπορούμε να φτιάξουμε ένα menu με απλά βήματα.

Καλό θα ήταν προτού αλλάξετε τον κώδικα του blog να κάνετε ένα backup του template σας .



1. Προσθέτουμε τον CSS κώδικα στο template μας.

Πηγαίνουμε στην διάταξη του blog μας και από εκεί στην επεξεργασία HTML

Βρίσκετε το </b:skin> και προσθέτετε τον παρακάτω κώδικα.

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

Αυτό ήταν ……. (προς το παρόν)



2. Προσθήκη menu στο template μας



Πηγαίνετε ξανά στο «στοιχεία σελίδας» και πάνω από «αναρτήσεις ιστολόγου» πατήστε «προσθήκη gadget»

Διάλεχτε «HTML/JavaScript»

Αφήστε τον τίτλο κενό και προσθέστε τον παρακάτω κώδικα.

<ul class="basictab">
<li class="selected"><a href="http://aeolianfire.blogspot.com">Home</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

Κάντε κλικ στο αποθήκευση και τσεκάρετε το blog σας.



3. Προσαρμόστε το menu σας



Τώρα είναι η ώρα να αλλάξετε τα link – τίτλους – χρώματα του menu σας



3.1. Μέσα στον κώδικα του βήματος 2 βρείτε <li><a href=”#”>edit</a></li> αλλάξτε το σύμβολο # με το link που θέλετε και στην λέξη edit τον τίτλο που σας αρέσει.

Μπορειτέ επίσης να επαναλάβετε αυτό τον κώδικα όσες φόρες θέλετε ανάλογα με το ποσά link θέλετε να έχει το menu σας, ένα νέο link θα εμφανίζεται κάθε φορά.



3.2. Αλλαγή στα χρώματα του menu

Μπορειτέ να προσαρμόσετε τα χρώματα του menu έτσι ώστε να ταιριάζουν το blog σας.



Αλλαγή του κύριος χρώματος του φόντου του menu

Βρείτε στον κώδικα του πρώτου βήματος το παρακάτω



“background-color:#f6ffd5;”

Και αλλαξτε το με το χρώμα που θέλετε.



Αλλαγή του “on mouse over” φόντου

Βρείτε το “background-color:#DBFF6C;”

Και αλλάξτε το



Αλλαγή του χρώματος τον γραμμάτων

Βρείτε το “color:black;”

Αλλάξτε το black σε #xxxxxx οπού xxxxxx θα είναι το νέο σας χρώμα



Και αυτό ήταν…



Για οποιαδήποτε απορία και αν έχετε μην διστάσετε να με ρωτήσετε