Vertical Menu for Sidebar

Νέοι bloggers γεια σας...

Σήμερα θα δούμε πως βάζουμε ένα κάθετο menu, σε μια πλαϊνή στήλη (sidebar) στο blog μας...είναι (και αυτό) πολύ "ελαφρύ" και δεν αργεί το άνοιγμα του blog μας (λειτουργεί με css δεν είναι script ) !!! To έχω "πειράξει" λιγάκι στην εικόνα των κουμπιών (buttons), για να φαίνεται πιο όμορφο...

 

Βάλτε το σαν gadget !!! Κάντε copy-paste (αντιγραφή-επικόλληση) τον παρακάτω κώδικα σαν gadget / javaScript πατήστε αποθήκευση, και μετά μετακινείστε το gadget σε όποιο σημείο της sidebar toy blog σας ταιριάζει :

<style type="text/css"> 

<!--

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

margin: 0;

font-size: 80%;

font-weight: bold;

}

ul {

list-style: none;

margin: 0;

padding: 0;

}

/* =-=-=-=-=-=-=-[Menu Eight]-=-=-=-=-=-=-=- */

#menu8 {

width: 170px;

margin-top: 10px;

}

#menu8 li a {

text-decoration: none;

height: 32px;

voice-f1amily: "\"}\"";

voice-family: inherit;

height: 22px;

}

#menu8 li a:link, #menu8 li a:visited {

color: #000000;

display: block;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKwVWniD3W0lnvxlG2YZoHx-EtRwDXD_o13rhf540kz7TxLiO5c887-MJZBSp-n0212ZuhkNQ8j7HHtZeaSWEtz8l5mEvhY96UvRL_cBlceY88ezgXNwaZj3EWVaEOpz5w1wkQKFkqjYz1/);

padding: 8px 0 0 20px;

}

#menu8 li a:hover, #menu8 li #current {

color: #000000;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKwVWniD3W0lnvxlG2YZoHx-EtRwDXD_o13rhf540kz7TxLiO5c887-MJZBSp-n0212ZuhkNQ8j7HHtZeaSWEtz8l5mEvhY96UvRL_cBlceY88ezgXNwaZj3EWVaEOpz5w1wkQKFkqjYz1/) 0 -32px;

padding: 8px 0 0 25px;

}

#menu8 li a:active {

color: #000000;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKwVWniD3W0lnvxlG2YZoHx-EtRwDXD_o13rhf540kz7TxLiO5c887-MJZBSp-n0212ZuhkNQ8j7HHtZeaSWEtz8l5mEvhY96UvRL_cBlceY88ezgXNwaZj3EWVaEOpz5w1wkQKFkqjYz1/) 0 -64px;

padding: 8px 0 0 25px;

}

-->

</style> 

<center><div id="menu8"> 

<ul> 

<!-- CSS Tabs --> 

<li><a href="ΔΙΕΥΘΥΝΣΗ (URL LINK)" target="_blank">TITΛΟΣ</a></li> 

<li><a href="ΔΙΕΥΘΥΝΣΗ (URL LINK)" target="_blank">ΤΙΤΛΟΣ</a></li> 

<li><a href="ΔΙΕΥΘΥΝΣΗ (URL LINK)" target="_blank">ΤΙΤΛΟΣ</a></li> 

<li><a href="ΔΙΕΥΘΥΝΣΗ (URL LINK)" target="_blank">ΤΙΤΛΟΣ</a></li> 

</ul> 

</div> 

<div class='clear'></div></center> 

***Mην ξεχάσετε να βάλετε λινκ και τίτλο του λινκ στα κόκκινα γράμματα

***Με μπλε γραμματα είναι η εικόνα των κουμπιών που έβαλα εγώ (υπάρχει και εναλλακτική εικόνα με κουμπιά =>   http://i37.tinypic.com/2w2r2v6.jpg  (αν έχετε συνδιασμούς χρωμάτων σε μπλε)

***Ενδεικτικά έβαλα μόνον 4 buttons, αλλά επαναλάβετε τον κώδικα

<li><a href="ΔΙΕΥΘΥΝΣΗ (URL LINK)" target="_blank">ΤΙΤΛΟΣ</a></li> 

για να προσθέσετε κι άλλα κουμπιά

***στον κώδικα που σας δίνω τα κουμπιά (buttons) είναι κεντραρισμένα στη sidebar και λειτουργεί με 2 χρώματα on mouseover...