DropDown menus for blogger:
We all are facing some issue while creating blog. In that one of the issue my self also face while creating my blog that is menus for blogger. In this article i'm trying to explain how to give dropdown menus with horizontal direction.
DropDown menus for blogger:
In this article I'm trying to explain how to design blogger look and good design with dropdown menus items.
Follow the below simple steps to acheve your goal.STEP 1:
Login into your blogger account and then choose Template in left side menu bar and then choose EDIT HTML option
STEP 2:
Now you are able to edit HTML code. Just findout the “]]> </ b :Skin>" on your html tag. By default it will show like below format < b :skin>….</ b :Skin> if you expand that then you are able to easily findout the skin closer tag.
STEP 3:
Copy the below CSS Style before “]]></b:skin>" tag.
/*----naveen----*/
#navbar {
background: #060505;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#nav li a:hover, #nav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -25px 0 0 161px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#nav li li a:hover, #navli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}STEP 4:
after added style sheets then design you dropdown menus. If you want to display menus in top navigation bar then wrote below code inside content – outer class.
<div id='navbar'>
<ul id='nav'>
<li><a href='URL'>Home</a></li>
<li><a href='http://naveens-dotnet.blogspot.in/search/label/menu1''>menu1</a>
<ul>
<li><a href='URL'>tab1</a></li>
<li><a href='URL'>tab2</a></li>
</ul>
</li>
<li><a href='http://naveens-dotnet.blogspot.in/search/label/menu2'>menu2</a>
<ul>
<li><a href='URL'>tab1</li>
<li><a href='url'>tab2</a></li>
</ul>
</li>
</ul>
</div>
if you design page like above the result will become like belowResult:
STEP 5:
If you want to see this menus next to Header, then paste that div tag html content after the section widget class and inside region-inner header-inner class.
Note: here you are able to find you blogger title after that you just place the above mentioned html content.
Result:
Conclusion:
Hope this will help you some one who are looking for this..
Follow