Membuat Menu Floating Fixed Diatas Header ~ SOFtwareTEKnologi Go 2 Blog Tutorial

Assalm..Wr..Wb..Selamat Malam kita bersua lagi dimalam yang pekat ini..penyakit lama kambuh kembali..Gak bisa tidur..Insom bro..Mending bikin postingan biar bisa tidur dengan nyenyak. Semoga anda juga selalu diberi kesehatan yach..dan selalu diberi kemudahan dalam menjalankan hidup..Amin...Amin...Ya..Rabb.. Okey tak perlu lama foreplay...kita langsung pada mainset nya ajah.. Langkah awal...Buka celana anda...wuuupss...template..(ngaco)..dibackup dulu ya biar aman..Trus..expand template widget..( Langkah Standar ) Cari Tag berikut : ]]></b:skin> Kemudian letakan scripting berikut diatasnya:

/* Menu Horizontal Dropdown ----------------------------------------------- */ 
#menuwrapperpic{ /* This will make your menu stay where it is */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7NE36UNsXH4U_-7K-EtxVHaueCVhlplwuYr1O1vYjiBJDcJEgo_arsIfC9nOdS2RFPHtMUh0RiDVDbPLDvq8BY7h1O2MoSA7uS-_tORe-lgHhKcFDgTbXXc2vOMk5361d2M51LnUx0vCz/s0/menu-secondary-bg.png)
 repeat-x;
<blink>width:100%;</blink>
<blink>position: fixed;</blink>
margin:0 auto;
padding:0 auto
} 
#menuwrapper{width:100%;
;height:20px;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:#FFFFFF;border-right:1px solid #D1D1D1;padding:12px 10px 8px} 
#menubar a.trigger{background-image:url();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:#FF9900;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:#ff9900;color:#fff} #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}
</div>
</div>
</div>

Sekarang anda ingin meletakannya dimana, disini ada beberapa opsi yang saya sarankan Pertama diatas header yaitu tempat teratas pada template ( Lihat Template ini ) Kedua dibawah header Ketiga mungkin anda senang dengan meletakannya floating dibawah.. (Terserah anda, sesuai selera aja ) Kita bahas yang pertama dulu yach... Cari Tag <header> atau Tag <head> ( Ada template yang tidak memiliki Tag Header, maka bisa juga dengan Tag Head ) Letakan Script dibawah ini diatas Tag <header> atau Tag <head>

<span style="font-family: "Trebuchet MS",sans-serif;"><span style="font-size: small;"><span style="color: white;"><span style="background-color: red;"><div id='menuwrapperpic'>
<br /><div id='menuwrapper'>
<br /><ul id='menubar'><br />
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZipa85dGu4cDfLaxl6LsF9C3Crjh5j1dK1txoAgskQV08SiqIZNwDkrOqzjyabXKljjOG3h4mCGnhZhDbJA7TTj2GiJV6dlXEl-gj-QFBnXmwp5ACy_iP1kDCmYvMyILHpkMnQQ0cdVE/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<br />
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Masakan</a></li>
<br />
<li><a href='#'>Masakan Tradisional</a></li>
<br />
<li><a href='#'>chinese food</a></li>
<br />
<li><a href='#'>western food</a></li>
<br />
<li><a href='#'>Softdrink</a></li>
<br />
<li><a href='#'>Dessert</a></li>
<br />
<li><a href='#'>Kue</a></li>
<br /></ul>
<div class='menusearch'>
<br /><div style='float:right;padding:8px 8px 0 0;'>
<br /><form action='http://bakulnusantara.blogspot.com/search' method='get' target=''>
<br /><input name='sitesearch' style='display:none;' value='http://bakulnusantara.blogspot.com'/><br /><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdk_HGx81JCqSdh0vwurj7QSlR5yWdKAB_GKdx6tYbwf8koWYQmXmT8ol46lQBt4C16eCAZ8sCI7-Hzux3Ewmw3Ejt_G87R-IZmkWE1arM5qGk1WdMvRzdoUs-q8GbbW0pxEvOJVgAWI/s1600/field-bg.gif) no-repeat;' type='text' value='Cari...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYroPVaSgiseAeapBLmYpLCTLHGlwUUeOqI2G_dceSMetd86yc6RLyP2owPQXKxkx4b88aHuMNcCHNphyphenhyphenrECKPRbgbwY3UeNhawKhFL6PpbdWKxfjfmDrc6Ec4h09tEBVvsIzBgCwAng/s1600/bg_search.gif' type='image' value='Search'/><br /></form>
</div>
</div>
<br class='clearit'/></div>
<div style='clear:both;'/>
</div>
</span></span></span></span>
</div>
</div>
</div>

Posted in: