Ads 468x60px

Δευτέρα, 8 Φεβρουαρίου 2016

CSS Multicolored Menu

Φίλες και φίλοι γεια σας σε αυτή την ανάρτηση θα δούμε μια μπάρα μενού, με
διάφορα χρώματα και με ένα πολύ ωραίο wrapping effect!Είναι μια πολύ καλή
επιλογή για blogs που έχουν πολύχρωμα χρώματα!Μπαίνει οριζόντια στο πάνω
η κάτω μέρος του blog, η αν έχετε μεγάλη sidebar μπορεί να τοποθετηθεί και
εκεί όπως θα δείτε στο demo!




και για να το εγκαταστήσετε και εσείς

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--
........................................................................................................................................
 <style>/* Menu with peel effect by www.bloggerspice.com-----*/#BSmenu{width:100%;color:#665;font:12px/18px Tahoma, Arial, Helvetica, sans-serif;}#BSmenu ul{list-style:none;padding:5px;}#BSmenu li{list-style:none;display:block;float:left;height:37px;line-height:37px;text-align:center;margin:0 5px;}#BSmenu li a{display:block;float:left;font-weight:bold;color:#fff;text-decoration:none;padding:5px 35px;text-transform:uppercase;}#BSmenu li a:hover{text-decoration:none;}#BSmenu li a.red{background:#c40d0b url(https://lh6.googleusercontent.com/-9SJ37J4kL-c/TYC9YVp4dnI/AAAAAAAACcQ/WlY2qCDPEt4/s1600/r_f.gif) no-repeat left top;}#BSmenu li a:hover.red{background:#c40d0b none;}#BSmenu li a.orange{background:#f26522 url(https://lh3.googleusercontent.com/-Qj4OShlsY-Y/TYC9XfCJVYI/AAAAAAAACcM/LoSVzK0xvXQ/s1600/o_f.gif) no-repeat left top;}#BSmenu li a:hover.orange{background:#f26522 none;}#BSmenu li a.yellow{background:#e4c016 url(https://lh4.googleusercontent.com/-n4u5mwinRNM/TYC9YiZh76I/AAAAAAAACcU/QlVskL8qFD0/s1600/y_f.gif) no-repeat left top;}#BSmenu li a:hover.yellow{background:#e4c016 none;}#BSmenu li a.green{background:#219e0b url(https://lh6.googleusercontent.com/-3fQLSz7KIrM/TYC9WZ1kTlI/AAAAAAAACcE/0Z7tBIqAIfQ/s1600/g_f.gif) no-repeat left top;}#BSmenu li a:hover.green{background:#219e0b none;}#BSmenu li a.blue{background:#2c88ce url(https://lh6.googleusercontent.com/-LFtaRnZqbLk/TYC9VzrS3ZI/AAAAAAAACcA/B_mx4kWgKhU/s1600/b_f.gif) no-repeat left top;}#BSmenu li a:hover.blue{background:#2c88ce none;}#BSmenu li a.grey{background:#939393 url(https://lh3.googleusercontent.com/-YsLP0wseGmw/TYC9XKuq-CI/AAAAAAAACcI/1BCufgFKAHI/s1600/gr_f.gif) no-repeat left top;}#BSmenu li a:hover.grey{background:#939393 none;}/*menu end-------------------------*/</style>
<div id="BSmenu"><ul><li><a class="red" href="URL Here">Home</a></li><li><a class="orange" href="URL Here">About us</a></li><li><a class="yellow" href="URL Here">HTML</a></li><li><a class="green" href="URL Here">Widget</a></li>
<li><a class="blue" href="URL Here">Contact us</a></li>
<li><a class="grey" href="URL Here">Sitemap</a></li>
</ul>
</div>
...........................................................................................................................................................
ΑΛΛΑΓΕΣ

Αλλάζετε όλα τα κόκκινα URL Here με τα url των δικών σας διευθύνσεων, και όλους τους πράσινους τίτλους, με τους δικούς σας τίτλους!
Μόλις τελειώσετε πατήστε Αποθήκευση και είστε έτοιμοι!

Καλή επιτυχία!!!!





Edit by 

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog