Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




14 Κάθετο Μενού (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://lh6.googleusercontent.com/-3vK96QPeZ9I/TkbUkKabjOI/AAAAAAAAB7g/8fUwaGyYpMw/bbuttons.gif);
padding: 8px 0 0 20px;
}

#menu8 li a:hover, #menu8 li #current {
color: #000000;
background: url(https://lh6.googleusercontent.com/-3vK96QPeZ9I/TkbUkKabjOI/AAAAAAAAB7g/8fUwaGyYpMw/bbuttons.gif) 0 -32px;
padding: 8px 0 0 25px;
}

#menu8 li a:active {
color: #000000;
background: url(https://lh6.googleusercontent.com/-3vK96QPeZ9I/TkbUkKabjOI/AAAAAAAAB7g/8fUwaGyYpMw/bbuttons.gif) 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'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

14 σχόλια:

pandelees karagiann είπε...

test

Ζ είπε...

Ευχαριστώ πολύ για το Post! Είναι πραγματικά πολύ χρήσιμο!! Απλά θέλω να κάνω μια μικρή αλλαγή και δεν ξέρω πως.. :/ Στο mouse over γίνεται πολύ σκουρο και δεν μου καθεται καλά σε σχεση με το Blog μου. Πώς μπορώ να βγάλω αυτη την σκούρα σκιά και sto mouse over απλά να κανει από μαυρα-> μπλε* τα γραμματα???

*όπως πχ η δευτερη απόχρωση από εδω http://i37.tinypic.com/2w2r2v6.jpg

pandelees karagiann είπε...

Γιώτα, μπορεις να βάλεις τη διεύθυνση των μπλε κουμπιών (http://i37.tinypic.com/2w2r2v6.jpg) στο μεσαίο background: url...

Δηλαδή:
background: url(http://i37.tinypic.com/2w2r2v6.jpg) 0 -32px;

Μπορείς να χρησιμοποιήσεις και τις 2 εικόνες στην εναλαγή onmouseover

Τσάμης Γιώργος είπε...

Παντελή πολύ ωραίο το gadget , το έβαλα,λειτουργούσε κανονικά, αλλα μου χάλασε (μου αλλοίωσε)υο μέγεθος όλων των γραμματοσειρών στα κείμενα των αναρτήσεων στους τίτλους κ.ο.κ.κανοντας τα μεγάλα και bold. Σε τι μπορεί να οφείλεται???
ΓΙΩΡΓΟΣ
http://perkosnafpaktias.blogspot.com/

pandelees karagiann είπε...

Γιώργο μου, πρεπει να φταίει το γεγονός οτι η γραμματοσειρά του κώδικα επηρεάζει τον τυπο και το μέγεθος της γραμμ/ράς του blog σου...ρυθμίζεται και διορθώνεται, αλλά πρέπει να έχεις τις γνώσεις...πάντως πολλοί φίλοι που το έβαλαν (κι εγώ) δεν είχαν πρόβλημα !!!

betbasketcom είπε...

Παντελη μπορεις μηπως να δωσεις και τον κωδικο απο ενα ομοιο που χεις στο αιγιο blog σου? να μην ανοιγει δηλ σε αλλο παραθυρο και να μπορω να βαλω εκει και gadget.Στα χρωμματα αυτου.

pandelees karagiann είπε...

betbasketcom, βαλε διευθυνση url που το ειδες, γιατι κι εγω ακομα χανομαι που εχω βαλει, τι !!!....και θα κανω αναρτηση προσεχως....

betbasketcom είπε...

Στην αρχικη σου στο aigioparalia.com το open close menou

Σαμπάρ "ο Αλλοδαπός" Τάσος είπε...

Πολύ ωραίο το gadget σου!!!
το χρησιμοποίησα στο blog μου http://stb-oallodaposproteinei.blogspot.com/
έχω μια ερώτηση όμως...πως θα το κάνω να ανοίγει σε άλλη σελίδα το link?

pandelees karagiann είπε...

Τασσο, ο κωδικας ετσι οπως τον εχω, ανοιγει το λινκ σε νεο παραθυρο...ειναι η φραση target="_blank" την εχει ηδη ο κωδικας....την έβγαλες?

Σαμπάρ "ο Αλλοδαπός" Τάσος είπε...

έχεις δίκιο μάλλον το έκανα καταλάθος στα δυο κουμπιά... επικόλλησα τη γραμμή και τώρα γίνεται μια χαρά...ευχαριστώ! Αν μπορείς τσέκαρε τα 2 blog μου και πες μου την γνώμη σου στο mail http://shambar-e-radio.blogspot.com/
http://stb-oallodaposproteinei.blogspot.com/

freedomway radio είπε...

πολυ χρησιμα ολα αυτα φιλε,μπραβο
http://www.freedomwayradio.blogspot.gr

12dimotikoneapoli είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
pandelees karagiann είπε...

Φιλε μου, γιατι να το βαλεις στη μεσαια στηλη? δηλαδή στις αναρτήσεις?
Μπορεις να το βαλεις οπου θελεις , ετσι οπως ειναι....δεν αλλάζει κάτι...
φτιάξε τον κώδικα σωστα, και βάλτον όπου θέλεις....σε όποια στήλη θέλεις...πρόβλημά σου...
τα κοκκινα γράμματα (λινκ & τιτλοι) πρεπει να τα βαλεις οπωσδήποτε