Semi Opaque CSS3 Menu για το blog σας
Σήμερα θα σας παραθέσουμε ένα σύντομο και ιδιαίτερα εύκλολο στην εφαρμογή tutorial για το πως μπορείτε να δημιουργήσετε ένα Semi Opaque CSS3 Menu για το blog σας . Αυτό το menu-bar περιλαμβάνει ενα πολύ όμορφο hover effect. Για την υλοποιήση αυτού του menu-bar γίνεται χρήση τεχνολογιών CSS και HTML που είναι βασικές στην κατασκευή ιστοσελίδων και φυσικά όχι μόνο στα blogs
CSS3 Semi Opaque Menu
Tutorial
1. Συνδεθείτε στο blogger account σας και κάντε κλικ στο drop down menu όπως στην φωτογραφία που ακολουθεί
2. Τώρα επιλέξτε "Template" όπως στην εικόνα της φωτογραφίας μας ακολούθως .
3. Τώρα είστε live στο blog , κάντε κλίκ στο button EDIT HTML 4. Κάντε κλικ στο button Proceed . 5. Βρείτε τον κώδικα που ακολουθεί κάνοντας χρήση των πλήκτρων Ctrl+F ]]></b:skin> 6. Κάντε paste τον κώδικα που ακολουθεί πριν το tag ]]></b:skin> /* The CSS Code for the menu starts here
*/
div.bottombar{ /* bar that runs across the bottom of the menu */ height: 10px; background: #1a1109; } ul.semiopaquemenu{ /* main menu UL */ font: bold 14px Georgia ; width: 100%; background: #b1e958; padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */ margin: 0; text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */ } ul.semiopaquemenu li{ display: inline; } ul.semiopaquemenu li a{ color:black; padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */ margin-right: 15px; /* spacing between each menu link */ text-decoration: none; } ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{ color: black; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod HRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMS
IgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVk IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogIC AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3Rv cCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3 JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ct Z2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9+ SVG equivalent of linear gradients */ background: -moz-linear-gradient(top, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */ background: -webkit-gradient(linear, left top, left bottom, colorstop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16))); background: -webkit-linear-gradient(top, 100%);
rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16)
background: -o-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); background: linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 ); -moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */ -webkit-box-shadow: 0 0 5px #595959; box-shadow: 0 0 5px #595959; padding-top: 12px; /* large padding to get menu item to protrude upwards */ padding-bottom: 20px; /* large padding to get menu item to protrude downwards */ }
7. Πηγαίντε στο blog σας και επιλέξτε Layout 8. Κάντε κλικ στο Add Gadget και επιλέξτε 'HTML/Javascript 9. Κάντε paste τον ακόλουθο κώδικα. <ul> <li><a href="http://www.bloggertrix.com/">Home</a></li> <li><a href="http://www.bloggertrix.com/">CSS Codes</a></li> <li><a href="http://www.bloggertrix.com/">Forums</a></li> <li><a href="http://www.bloggertrix.com/">Tools</a></li> <li><a href="http://www.bloggertrix.com/">JavaScript</a></li> <li><a href="http://www.bloggertrix.com/">Gallery</a></li> </ul> <div> </div>
10. Δώστε save στο HTML/Javascript'. Αυτό ήταν όλο. Ελπίζω το σημερινό μας tutorial να σας φάνηκε χρήσιμο