Hay friends, Dengerin lagu yuks
Hehehehe ..
0T3T

Male, 25 years

Australia

If you're doing your best, you won't have any time to worry about failure and The past can't see you, but the future is listening.
Wellcome to Freedom
Freedom

Navbar3

EnglishFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Jan 18, 2014

Create a Drop Down Menu Above Header Or Under Header


The drop down menu can we put on top of or under the blog name, by installing this kind of menu display of our blog more and look good and will certainly facilitate visitors to find what you need from our blog.
How to Create a Drop Down Menu Above Or Below Header Header:

1. As usual my friend having to login in your account your blog
2. Choose the design / desing and click on edit HTML and proceed
3. Check "Expand Widget Templates" to avoid the event of an error
4. Find the code
]]> </ b: skin> and place the following code just above the code ]]> </ b: skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Further bloggers find the following code:

<header>: to place the menu at the top of the blog name
</ header>: to put the menu under the name of the blog
Copy the code below and place it just above or below <header> code code </ header>


<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://ot3t.blogspot.com'><img border='0' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://www.blogger.com/profile/205796768942912045' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106569408024654697241' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/......' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/.....' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/.....' target='new'>You&#39;Profil on Facebook</a></li>
</ul>
</li>
<li><a href='http://ot3t.blogspot.com' target='new'>0t3t&#39; Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://ot3t.blogspot.com/search/label/.....'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://ot3t.blogspot.com/search/label/.......'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://ot3t.blogspot.com/search/label/......'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Categori</a>
<ul>
<li><a href='http://ot3t.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://ot3t.blogspot.com/search/label/computer'>Computer</a></li>
<li class='hr'/>
<li><a href='http://ot3t.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://ot3t.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://ot3t.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://ot3t.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://ot3t.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://ot3t.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://ot3t.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Search...'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

So How to Create Drop Down Menu Above Header Header Or Under, may be useful for bloggers.

0 Comments:

Recent Post


IP Checker



Flag Counter


Related Posts Plugin for WordPress, Blogger...