Floating jQuery vertical menu gadget για τον Blogger

Το gadget αυτό θα λύσει τα χέρια σε πολλούς που έχουν ήδη συμπληρώσει το χώρο τους στο μενού και χρειάζονται λίγο παραπάνω. Ακολουθήστε τα βήματα για να το εγκαταστήσετε κι εσείς στη Σελίδα σας:

• Σύνδεση στον Blogger
• Σχεδίαση / Επεξεργασία HTML
• Βρείτε την ]]></b:skin>
• Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

#floatMenu {
position:absolute;
top:155px;
left:-15%;
margin-left:245px;
width:200px;
}
#floatMenu ol,#floatMenu  ul {list-style: none;}
#floatMenu ul {
margin-bottom:18px;}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;}

• Βρείτε την </body>
• Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<script language="javascript" src="http://pandet-pandet.googlecode.com/files/floating_menu.1.js">
</script>

• Αποθηκεύστε το πρότυπό σας.
• Πατήστε τώρα "Στοιχεία Σελίδας"
• Προσθήκη gadget και επιλέξτε HTML/JavaScript
• Επικολλήστε τον παρακάτω κώδικα:

<div id="floatMenu"><ul class="menu1"><li><a href="#"> Home </a></li>
<li><a href="#"> ΤΙΤΛΟΣ </a></li>
<li><a href="#"> ΤΙΤΛΟΣ </a></li>
<li><a href="#"> ΤΙΤΛΟΣ </a></li>
<li><a href="#"> ΤΙΤΛΟΣ </a></li>
</ul></div>

• Προσθέστε τα δικά σας στοιχεία στη θέση των "#" και βάλτε τους τίτλους των Σελίδων σας και πατήστε αποθήκευση.

Μπορείτε να προσθέσετε κι άλλες σειρές στη λίστα

LIVE DEMO