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 θα είναι το νέο σας χρώμα



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



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


4 comments:

  Dasein

17 Μαρτίου 2010 - 10:14 μ.μ.

Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
  panos.grigoris

20 Φεβρουαρίου 2011 - 12:02 π.μ.

Ευχαριστώ για το μενού αλλά ήθελα να ρωτήσω αν έχω στο μενού έχω επικοινωνία για παράδειγμα πως βάζω πολλές δημοσιεύσεις εκεί??

  kallia's blog

7 Απριλίου 2011 - 2:46 π.μ.

to e kana alla tin leksi me ta xromata den tis vriskei gia na ta alakso ti tha kano tora kai ti noumera na valo gia xroma de ksero ta noumera ton xromaton.kalia

  Maraki

22 Απριλίου 2012 - 1:56 μ.μ.

Καλησπερα κ απο μενα ! εκανα ολα οσα γραφεις κ ολα οκ ,όμως εχω μια απορια που οσο κ αν εψαξα δυστυχως ακρη δεν εβγαλα. ειμαι new σε ολα αυτα κ δεν μπορω να καταλαβω το εξης : γραφεις στο 3.1 οτι μπορουμε να βαλουμε το Link που θελουμε ....που το βρισκουμε αυτο το Link ?? εγω πχ. θελω στο μενου μου να βαλω στοιχεια επικοινωνιας μου , πληροφοριες σχετικα με το blog κ.α, πως λοιπον θα κανω κατι τετοιο ?? ευχαριστω εκ των προταιρων !