Ακολουθήστε μας στο Google News

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>


Δείτε το εδώ Βάλτε τα στοιχεία της Σελίδας σας και πατήστε αποθήκευση.


ΠΗΓΗ
Δημοσίευση σχολίου (0)
Νεότερη Παλαιότερη