| Stylish
Menu Bar For Blogger
This widget Create a Menu bar on your blog, You can set it on top,
if you set it on top it show horizontal, If you set it on side
bar widget it show vertically which have not create impression,
I give you suggestion to set it on top of your blog widget.
I set below a Demo you can see it below
How to Install
To Blogger
Go To Blogger Dashboard »» Layout »» Add Gadget
»» Select HTML/JavaScript »» Paste Code from Below Box in Content Box
Title Remain Empty because If you Write In Title it Also
Show there, »» Click On Save Button
If You Have troubble To Installing widget to blog
Then Click Below link to Go o toturial
Click Here
Note: There is some text For point out change colour
Red for Code Of your Menu Bar Colour
# which is Green for related link, And Pink For
Title Of link.
Software For Generate Color Code ( 372 kb )
Download
<style>
#Maji-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:100%; float:left;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
background: #0000FF
url(http://1.bp.blogspot.com/-wkCJWwWHkds/UUhg3QUJc5I/AAAAAAAAAWQ/wcE_CDOtVBw/s1600/gradient-kotlians.blogspot.com.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(http://1.bp.blogspot.com/-wkCJWwWHkds/UUhg3QUJc5I/AAAAAAAAAWQ/wcE_CDOtVBw/s1600/gradient-kotlians.blogspot.com.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0000FF
url(http://1.bp.blogspot.com/-wkCJWwWHkds/UUhg3QUJc5I/AAAAAAAAAWQ/wcE_CDOtVBw/s1600/gradient-kotlians.blogspot.com.png) repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://1.bp.blogspot.com/-wkCJWwWHkds/UUhg3QUJc5I/AAAAAAAAAWQ/wcE_CDOtVBw/s1600/gradient-kotlians.blogspot.com.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
</style>
<div id="Maji-Container">
<ul id="nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Kotlians</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub
Sub-Row 1
<li><a href="#">Sub
Sub-Row 1</a></li>
<li><a href="#">Sub
Sub-Row 1</a></li>
<li><a href="#">Sub
Sub-Row 1</a></li>
</a></li></ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub
Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a></li>
<li><a href="#">Sub-Row</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level
Item 1</a></li>
<li><a href="#">Sub-Level
Item 1</a>
<ul>
<li><a href="#">Sub-Level
Item 11</a></li>
<li><a href="#">Sub-Level
Item 22</a></li>
<li><a href="#">Sub-Level
Item 33</a></li>
</ul>
</li>
<li><a href="#">Sub-Level
Item 1</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another
Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level
Item 2</a></li>
<li><a href="#">Sub-Level
Item 2</a></li>
<li><a href="#">Sub-Level
Item 2</a></li>
</ul>
</li>
</ul>
</li><li><a href="#">Sitemap</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact
Us</a></li>
<li><a href="#">About
Us</a></li>
<li><a href="#">Create
This »</a></li>
</ul></div>
<br/>
Live demo Of Widget
|
Post a Comment