Νέοι bloggers γεια σας...
Σήμερα θα δούμε πως βάζουμε ένα κάθετο menu, σε μια πλαϊνή στήλη (sidebar) στο blog μας...είναι (και αυτό) πολύ "ελαφρύ" και δεν αργεί το άνοιγμα του blog μας (λειτουργεί με css δεν είναι script ) !!! To έχω "πειράξει" λιγάκι στην εικόνα των κουμπιών (buttons), για να φαίνεται πιο όμορφο...
Βάλτε το σαν gadget !!! Κάντε copy-paste (αντιγραφή-επικόλληση) τον παρακάτω κώδικα σαν gadget / javaScript πατήστε αποθήκευση, και μετά μετακινείστε το gadget σε όποιο σημείο της sidebar toy blog σας ταιριάζει :
Βάλτε το σαν 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/
DEMO: στο http://www.dr-blogger.com/ και στο http://www.magicfmagrinio.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
14 σχόλια:
test
Ευχαριστώ πολύ για το Post! Είναι πραγματικά πολύ χρήσιμο!! Απλά θέλω να κάνω μια μικρή αλλαγή και δεν ξέρω πως.. :/ Στο mouse over γίνεται πολύ σκουρο και δεν μου καθεται καλά σε σχεση με το Blog μου. Πώς μπορώ να βγάλω αυτη την σκούρα σκιά και sto mouse over απλά να κανει από μαυρα-> μπλε* τα γραμματα???
*όπως πχ η δευτερη απόχρωση από εδω http://i37.tinypic.com/2w2r2v6.jpg
Γιώτα, μπορεις να βάλεις τη διεύθυνση των μπλε κουμπιών (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/
Γιώργο μου, πρεπει να φταίει το γεγονός οτι η γραμματοσειρά του κώδικα επηρεάζει τον τυπο και το μέγεθος της γραμμ/ράς του blog σου...ρυθμίζεται και διορθώνεται, αλλά πρέπει να έχεις τις γνώσεις...πάντως πολλοί φίλοι που το έβαλαν (κι εγώ) δεν είχαν πρόβλημα !!!
Παντελη μπορεις μηπως να δωσεις και τον κωδικο απο ενα ομοιο που χεις στο αιγιο blog σου? να μην ανοιγει δηλ σε αλλο παραθυρο και να μπορω να βαλω εκει και gadget.Στα χρωμματα αυτου.
betbasketcom, βαλε διευθυνση url που το ειδες, γιατι κι εγω ακομα χανομαι που εχω βαλει, τι !!!....και θα κανω αναρτηση προσεχως....
Στην αρχικη σου στο aigioparalia.com το open close menou
Πολύ ωραίο το gadget σου!!!
το χρησιμοποίησα στο blog μου http://stb-oallodaposproteinei.blogspot.com/
έχω μια ερώτηση όμως...πως θα το κάνω να ανοίγει σε άλλη σελίδα το link?
Τασσο, ο κωδικας ετσι οπως τον εχω, ανοιγει το λινκ σε νεο παραθυρο...ειναι η φραση target="_blank" την εχει ηδη ο κωδικας....την έβγαλες?
έχεις δίκιο μάλλον το έκανα καταλάθος στα δυο κουμπιά... επικόλλησα τη γραμμή και τώρα γίνεται μια χαρά...ευχαριστώ! Αν μπορείς τσέκαρε τα 2 blog μου και πες μου την γνώμη σου στο mail http://shambar-e-radio.blogspot.com/
http://stb-oallodaposproteinei.blogspot.com/
πολυ χρησιμα ολα αυτα φιλε,μπραβο
http://www.freedomwayradio.blogspot.gr
Φιλε μου, γιατι να το βαλεις στη μεσαια στηλη? δηλαδή στις αναρτήσεις?
Μπορεις να το βαλεις οπου θελεις , ετσι οπως ειναι....δεν αλλάζει κάτι...
φτιάξε τον κώδικα σωστα, και βάλτον όπου θέλεις....σε όποια στήλη θέλεις...πρόβλημά σου...
τα κοκκινα γράμματα (λινκ & τιτλοι) πρεπει να τα βαλεις οπωσδήποτε
Δημοσίευση σχολίου