Κάθετο Μενού (Vertical Menu) για 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/AVvXsEg5-dHYAud18yKroBW5ODcGO0plvXGROzWb2SNeLVd7atv8P5zaz6LAFSoI9AClN2Keys-T4iqzBwa2Vv81WhyGeMkwLdnJz_N3jLc9_WRY8en8SaDJPpDiJpginh9pqiqVo1BEAMCvcnso/);

padding: 8px 0 0 20px;

}

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

color: #000000;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-dHYAud18yKroBW5ODcGO0plvXGROzWb2SNeLVd7atv8P5zaz6LAFSoI9AClN2Keys-T4iqzBwa2Vv81WhyGeMkwLdnJz_N3jLc9_WRY8en8SaDJPpDiJpginh9pqiqVo1BEAMCvcnso/) 0 -32px;

padding: 8px 0 0 25px;

}

#menu8 li a:active {

color: #000000;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-dHYAud18yKroBW5ODcGO0plvXGROzWb2SNeLVd7atv8P5zaz6LAFSoI9AClN2Keys-T4iqzBwa2Vv81WhyGeMkwLdnJz_N3jLc9_WRY8en8SaDJPpDiJpginh9pqiqVo1BEAMCvcnso/) 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... 

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

ΠΗΓΗ : δεν έχω ακόμα, γιατί μου το έδωσε ένας πολύ φίλος (ο Σπύρος magicfmagrinio)
DEMO:  στο http://www.dr-blogger.com/  και στο  http://www.magicfmagrinio.com/

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}