Ads 468x60px

Τετάρτη, 20 Νοεμβρίου 2013

Vertical CSS Menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα Vertical Menu για
το blog μας!Μπαίνει κάθετα στην αριστερή η δεξιά sidebar μας, η ακόμα και στο
footer εάν έχετε χώρο!Είναι με κώδικα Css, δεν καθυστερεί το άνοιγμα το blog μας,
και έχει και background color effect!




Δείτε εδώ το DEMO




Η εγκατάσταση του είναι απλή..

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
..............................................................................................................................................................
<center>
<style type="text/css">

.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 150px;
}

.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/
background-color: #704968;
text-decoration:none;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}

</style>
<ul class="buttonmenu">
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>       
</ul>
</center>
..............................................................................................................................................................
ΑΛΛΑΓΕΣ 
ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!

ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!
 
 Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to dynamicdrive.com/



Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog