3D CSS3 οριζόντιο menu gadget για τον Blogger

 τοποθετείται απλά ως gadget. Πρόκειται για ένα απλό menu με μικρές πινελιές 3D εμφάνισης.
Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη δική σας Σελίδα:

• Σύνδεση στον Blogger
• Διάταξη / Προσθήκη gadget
• Επιλέξτε HTML/JavaScript
• Επικολλήστε τον παρακάτω κώδικα:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style type='text/css'>#nav {width:100%;margin-center:-40px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Uq-Zpc_65Uvj0uK_lWPXm_gutslQ4lpGgT5iPUzSv1-ByX4etJpHacvb1VfXe69Z99I6xQUFTsLbdK7Ss2-_gktdn5tv4ZZ_S6LuwC1sSC3oDwrTBWGwZwUZz0ifr6tmPhlgdGgPQ2Xi/) repeat-x;} #nav li {float: left;display: block;} #nav li a {float: left;display: block;padding: 12px 18px 12px 18px;text-transform: uppercase;text-decoration:none;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLVPvehY4XdzrY8IIGh0BUhwu0mRduXePnor8oqB8VRz7yzDMqPVDD49ZswaS_bpX-Aj9BTEYXbRlOsrqnY9HSleOUSKMST8Rptuc1_s8GlH3KXHJMfPFJEvM_0S8aHMf2MSHqA9HEZJP/) no-repeat top right;color:#ffffff;} #nav li a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLVPvehY4XdzrY8IIGh0BUhwu0mRduXePnor8oqB8VRz7yzDMqPVDD49ZswaS_bpX-Aj9BTEYXbRlOsrqnY9HSleOUSKMST8Rptuc1_s8GlH3KXHJMfPFJEvM_0S8aHMf2MSHqA9HEZJP/) no-repeat right -40px;color:#ffffff;text-decoration:none;} ul#nav li.current_page_item a, ul#nav li.current-cat a {color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLVPvehY4XdzrY8IIGh0BUhwu0mRduXePnor8oqB8VRz7yzDMqPVDD49ZswaS_bpX-Aj9BTEYXbRlOsrqnY9HSleOUSKMST8Rptuc1_s8GlH3KXHJMfPFJEvM_0S8aHMf2MSHqA9HEZJP/) no-repeat right -80px;} #nav li ul {display: none;}</style> <ul id="nav">  <li class="current_page_item"><a href="#">Home</a></li>  <li><a href="#" title="ΠΕΡΙΓΡΑΦΗ">HTML</a></li>    <li><a href="#" title="ΠΕΡΙΓΡΑΦΗ">CSS</a></li>  <li><a href="#" title="ΠΕΡΙΓΡΑΦΗ">PHP</a></li>  <li><a href="#" title="ΠΕΡΙΓΡΑΦΗ">MySQL</a></li>  <li><a href="#" title="ΠΕΡΙΓΡΑΦΗ">About</a></li>  <li><a href="#" title="ΠΕΡΙΓΡΑΦΗ">Contact</a></li>  </ul>  <div class="clear"></div>

• Συμπληρώστε τα στοιχεία που χρειάζεται αντικαθιστώντας τα κόκκινα γράμματα και πατήστε αποθήκευση