Drop down menu helps to keep your blog attractive
You can link main page for it.Like contact us page
about us page.So, this menu bar like classic.
Earlier i made a post Attractive Css Drop Down Menu
Bar For Blogger. It also nice menu-bar. I provide demo
link for it. so you can check it before add to your blog.
you can add it to your blog with easy steps. Follow
these steps to add it your blog.
DEMO
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
*Replace # With your URL
*Replace Name with as your like.
7. Now save your template
you are done.
You can link main page for it.Like contact us page
about us page.So, this menu bar like classic.
Earlier i made a post Attractive Css Drop Down Menu
Bar For Blogger. It also nice menu-bar. I provide demo
link for it. so you can check it before add to your blog.
you can add it to your blog with easy steps. Follow
these steps to add it your blog.
DEMO
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 3px 3px 0px;
background-color:#414141;
background-repeat:repeat;
border-color:#CECECE;
border-width:4px;
border-style:ridge;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
position:absolute;
z-index: 1000;
left: 100;
top: 200;
}
* HTML ul.pureCssMenu {position:absolute}
ul.pureCssMenu ul{
width:103.95px;
}
ul.pureCssMenu li{
display:block;
margin:3px 0px 0px 3px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#414141;
border-width:1px;
border-color:#414141;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:14px Verdana;
color: #FFFFFF;
text-decoration:none;
cursor:pointer;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3;
height:100%;
display:inline-block;
background-color:#CECECE; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#A3A3A3;
border-color:#FFFFFF;
border-style:solid;
font:14px Verdana;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#A3A3A3;
border-color:#FFFFFF;
border-style:solid;
font:14px Verdana;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;
height:24px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:14px;}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif);}
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 3px 3px 0px;
background-color:#414141;
background-repeat:repeat;
border-color:#CECECE;
border-width:4px;
border-style:ridge;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
position:absolute;
z-index: 1000;
left: 100;
top: 200;
}
* HTML ul.pureCssMenu {position:absolute}
ul.pureCssMenu ul{
width:103.95px;
}
ul.pureCssMenu li{
display:block;
margin:3px 0px 0px 3px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#414141;
border-width:1px;
border-color:#414141;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:14px Verdana;
color: #FFFFFF;
text-decoration:none;
cursor:pointer;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3;
height:100%;
display:inline-block;
background-color:#CECECE; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#A3A3A3;
border-color:#FFFFFF;
border-style:solid;
font:14px Verdana;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#A3A3A3;
border-color:#FFFFFF;
border-style:solid;
font:14px Verdana;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;
height:24px;}
ul.pureCssMenu ul img {width:16px;height:16px;}ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{display:block;background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif);
background-position:right center;
background-repeat: no-repeat;padding-right:14px;}ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}
ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}
</style>
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
<ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Home</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank"><span>Link</span><![if gt ie 6]></![if></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenu"> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">Links 1</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">Links 2</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">Links 3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></![endif]></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">Data</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">About</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">Cart</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">Download</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">Categoris</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">Helps</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#" target="_blank">About Us</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="http://www.bloggertrix.com/" target="_blank">Add</a></li> </ul>
*Replace # With your URL
*Replace Name with as your like.
7. Now save your template
you are done.
0 comments:
Post a Comment