CSS οριζόντιο menu gadget για το blog σας

Ουκ ολίγα παρόμοια θέματα έχουμε αναρτήσει στο παρελθόν. Στη σελίδα μας προσπαθούμε να απλοποιήσουμε τους κώδικες ώστε να μπορεί ο καθένας, αρχάριος ή έμπειρος, να τους χρησιμοποιήσει.
Ακολουθήστε τα παρακάτω βήματα για να εγκαταστήσετε το menu στο δικό σας blog:
  • Σύνδεση στον Blogger
  • Διάταξη / Προσθήκη gadget
  • Επιλέξτε HTML/JavaScript
  • Επικολλήστε τον παρακάτω κώδικα:
<style>.menupic{width:100%;margin:0 auto;padding:0 auto;}.menuhorisontal{float:right;background-color:#2b5385;background-image: -moz-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -ms-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -o-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4488dd),color-stop(100%,#2b5385)); background-image: -webkit-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: linear-gradient(to bottom,#4488dd 0,#2b5385 100%);border-bottom:1px solid #112136;border-top:4px solid #1a3352;height:45px;width:100%;margin:0 auto; padding:0 auto;text-shadow:1px 1px 2px #112136}.menuhorisontal ul{margin: 0; padding-left: 0px;color:#357798;text-transform: capitalize;list-style-type: none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;}.menuhorisontal li{display: inline; margin: 0;}.menuhorisontal li a{border-left:1px solid #1a3352;border-top:4px solid #112136;color:#fff;float:left;font-size:12px;line-height:20px;margin-top:-4px;padding:3px 10px;text-align:right;transition:all 600ms ease-in-out;-webkit-transition:all 600ms ease-in-out;-moz-transition:all 600ms ease-in-out;-o-transition:all 600ms ease-in-out;-ms-transition:all 600ms ease-in-out;}.menuhorisontal li a span{color:#b6d5fd;display:block;font-size:10px;font-weight:400;}.menuhorisontal li a:hover {background:#112136;border-top:4px solid #4488dd;}</style><div class='menupic'><div class='menuhorisontal'><ul><li><a href='/'>Home <span>My Frontpage</span></a></li><li><a href='#'>Τίτλος <span>Περιγραφή</span></a></li><li><a href='#'>Τίτλος <span>Περιγραφή</span></a></li><li><a href='#'>Τίτλος<span>Περιγραφή</span></a></li><li><a href='#'>Τίτλος<span>Περιγραφή</span></a></li><li><a href='#'>Τίτλος<span>Περιγραφή</span></a></li></ul></div></div>


 Δείτε το εδώ Βάλτε τα στοιχεία της Σελίδας σας και πατήστε αποθήκευση.
ΠΗΓΗ
Κατηγορίες:
Σχόλια