Header Dropdown Menu And Seach Box For Blogger
--------------------------------------------------------------------------------------------------------------------------
Add This Css Code Before Your Bskin Tag
/* HEADER AREA
* ================ */
h2.date-header{display:none}
.header-wrapper{background:url(http://2.bp.blogspot.com/-_8AQLhnfQN0/UR2EvQ0KIwI/AAAAAAAAAK4/-aoYoZoKy-0/s1600/header.png)
no-repeat bottom center;width:950px;
color:#333;min-height:100px;
overflow:hidden;position:relative;z-index:999;margin:0 auto}
#header{max-width:420px;float:left;width:auto;overflow:hidden;z-index:999;
min-width:240px;margin:0;padding:0}
#header-inner{margin:10px 0 10px;padding:0}
#header h1,#header p{font:34px Oleo Script Swash Caps;
line-height:30px;color:#8cd700;padding-bottom:10px;margin:0 0 0 8px}
#header h1 a,#header h1.title a:hover{color:#8bc01d;text-decoration:none}
#header .description{color:#9452aa;font:14px Oswald;text-shadow:none}
#header img{border:0 none;background:none;width:auto;height:auto;margin:0 auto}
#header2{float:right;width:468px;margin:15px 0 0 10px}
.header2 .widget{margin:0 auto;padding:5px 0}
/* MENU AREA
* --------------- */
.masmenu{background: url(http://2.bp.blogspot.com/-BFThDLgqKSc/USQWgnVtukI/AAAAAAAAAMo/l0FMeTmK18I/s1600/menu.gif) repeat-x bottom;color:#eee;text-shadow: 1px 1px 1px #495505;
display:inline-block;width:100%;border-bottom:8px
solid #b166c8;-moz-border-radius:4px;-webkit-border-radius:4px;
border-radius:4px}
.masmenu ul{width:950px;padding:0;margin:0 auto}
.masmenu li:first-child a{padding:11px 10px 7px}
.masmenu li{list-style:none;display:inline-block;float:left}
.masmenu li a{background:url(http://2.bp.blogspot.com/-SudDk5uFlqQ/USQWhOU6NVI/AAAAAAAAAMw/DEw9vCansIQ/s1600/sprite.gif) right no-repeat;color:#fff;display:block;font:16px Oswald;position:relative;text-decoration:none;padding:10px 14px}
.masmenu li a:hover{background:url(http://2.bp.blogspot.com/-1n2cs6FV_Zk/USQWgu0tkVI/AAAAAAAAAMk/FRNytZeOe8s/s1600/menu-hover.gif) repeat-x bottom;color:#fff;text-shadow: 1px 1px 1px #292929}
.masmenu li.home a, .masmenu li.home a:visited{background:url(http://2.bp.blogspot.com/-1n2cs6FV_Zk/USQWgu0tkVI/AAAAAAAAAMk/FRNytZeOe8s/s1600/menu-hover.gif) repeat-x bottom;color:#fff;text-shadow: 1px 1px 1px #292929;-moz-border-radius:4px 0 0 0; -webkit-border-radius:4px 0 0 0; border-radius:4px 0 0 0;}
.masmenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.masmenu li li a,.masmenu li li a:link,.masmenu li li a:visited{background:#b166c8;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;}
.masmenu li li a:hover,.masmenu li li a:active{background:#c477db;}
.masmenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.masmenu li ul a{width:140px}
.masmenu li ul ul{margin:-33px 0 0 157px}
.masmenu li:hover>ul,.masmenu li.sfHover ul{left:auto}
/* = Menu Serach = */
.menusearch{width:200px;float:right;margin:0 auto;padding:8px 10px 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:29px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #6962a5;}
.searchform input {font:italic 12px Arial;color:#222;line-height:29px;height:29px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:29px;border:0px;outline: none;line-height:29px;}
.searchform .searchbutton{border:none;font-size:12px;height:29px;width:29px;margin:0;padding:0}
--------------------------------------------------------------------------------------------------------------------------
Add This Html Code After Head,Body,Outer Wrapper Tags But Before Content Wrapper
--------------------------------------------------------------------------------------------------------------------------
</head>
<!--<body>-->
<body>
<div id='outer-wrapper'>
<div class='header-wrapper'>
<b:section class='header'
id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1'
locked='true' title=' Naughty Fashion (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></p></b:if>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"
background-image: url(\""
+ data:sourceUrl + "\"); "
+ "background-position: "
+ data:backgroundPositionStyleStr+";"+ data:widthStyleStr
+ "min-height: " + data:height+"_height:"
+ data:height+ "background-repeat:
no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></p>
</b:if>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl'
style='display: block'>
<img expr:alt='data:title'
expr:id='data:widget.instanceId
+ "_headerimg"' expr:src='data:sourceUrl'
style='display: block'/></a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div></b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='header' id='header2'
maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML5'
locked='false' title='Blogroll' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='masmenu'>
<ul class='sf-menu'>
<li class='home'><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBxS3ERzXkMJK_BDdpD-ABQ2vLtWExZtJXSt9-wIgPqbbD23Kc8sBClMJIkyE524IlMnCHHv_GHrccr5iKGDL1XTxOfal2eoFw_AqdhhVph7WHyDtBMNe5K0weikqGiIlrF9AK77BOYFs/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<ul>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Drop Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/>
<input class='searchbutton' src='http://1.bp.blogspot.com/-w2K41O4n8yE/USQrCI_n8wI/AAAAAAAAANY/MVAbnnfoqeE/s1600/search_button.png' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
</div> <Menu-Code-Finish -Div/>
<div id='content-wrapper'>
0 comments:
Post a Comment