CSS3 is a new technology by which we can made new and professional widgets in just simple steps and very easily. Similarly we have a shining menu which is made by the CSS3 and it's hovering effect is too awesome and very shining that's why we have given it a name Shining Menu. It will give a new look and feel to your blog and visitors will love and ask for this widget OR menu.
Add Shining Horizontal Menu in Blogger
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Layout
- Add a HTML/JavaScript Gadget
- Paste below code in it.
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhkXiq1dzUTJ-SHPLugfMwB1fPaL5QFNOLRSQJGSbPdDqG9bzrYtAxumSeTr_Y4czgHHqGdHyTd51C1kdFGCvb3cxzFLO6LJ6KQyXLRZmZtNG9RcCtpijYwehw11NJWrNvmxgXbX3sm4/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://widgetgenerators.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRhnBiHLJdqnNHOrYDozuNXkDXqZcveMJMZSTo9iABNs4wclTS9VsFmmRXHCylb6HbLF3WE-mhF_MlbrwYZMliuDfrt9iD98yAVIYoXvATxzXDHfAahzf9D64c0f260LBHXtQls7G8gwg/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
<ul class="menu">
<li><a href="http://widgetgenerators.blogspot.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://widgetgenerators.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://widgetgenerators.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://widgetgenerators.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://widgetgenerators.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
- Save Your Widget.
Make Changes....!
- Replace this Orange Color Link with your own link.
- Replace this Green link with your own tab name.