CSS οριζόντιο menu gadget για το blog σας
TO Blogger Tips and Tricks μας παρουσιάζει ένα εύκολο και όμορφο μενού για την ιστοσελίδα μας και εμείς το επιλέγουμε για να το δουν και οι φίλοι της δικής μας ιστοσελίδας που ίσως δεν το έχουν δει . Πάμε λοιπόν να δούμε τι είναι και πως θα το επεξεργαστούμε ....
Ουκ ολίγα παρόμοια θέματα έχουμε αναρτήσει στο παρελθόν. Στη σελίδα μας προσπαθούμε να απλοποιήσουμε τους κώδικες ώστε να μπορεί ο καθένας, αρχάριος ή έμπειρος, να τους χρησιμοποιήσει.
Ακολουθήστε τα παρακάτω βήματα για να εγκαταστήσετε το menu στο δικό σας blog:
Ακολουθήστε τα παρακάτω βήματα για να εγκαταστήσετε το menu στο δικό σας blog:
- Σύνδεση στον Blogger
- Διάταξη / Προσθήκη gadget
- Επιλέξτε HTML/JavaScript
- Επικολλήστε τον παρακάτω κώδικα:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <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> |
- Βάλτε τα στοιχεία της Σελίδας σας και πατήστε αποθήκευση.
..
..
Δεν υπάρχουν σχόλια :