Wednesday, 20 March 2013

Stylish Menu Bar For Blogger

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

 

0 comments:

Post a Comment