Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.Untuk membuatnya bisa lakukan posedur berikut:
1. Login ke menu blogger. Klik Design -> Edit HTML
2. Backup template anda
3. Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>
#navbar-iframe {
height:0px; visibility: hidden; display: none;
height:0px; visibility: hidden; display: none;
}
#fixed {position:fixed;top:0;left:0;width:100%;height:35px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:35px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
* html #outer-wrapper {height:100%;overflow:auto}
.toppica{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitTm7i0K1i_gAjKP1fi-zw1P15EBjP3eC4FKOC6QPjWcAMZADF4iEhpvQnDnpw9r8Z6ndr9VMD0zY59XB8dcf_K8uZSl8EvgptvvH53cBMIGndi9I3p_dfAa9VzIWLCjSvmRgYC9UU11E/s320/navbar.gif);width:100%;margin:0 auto;border-bottom:4px solid #666}
.topnav{width: 970px;height:35px;overflow: hidden;margin:0 auto;padding:0px 10px 0px 10px; }
h1{font-size:24px;}
#searcha{float:right;width:180px;height:20px;margin-top:5px;padding-right:5px}
#searcha form{float:left}
#searcha input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimEx76gTW0P2Uf677RwbsY0Gw_VK2WbnLoRcihtBTfl0lsCdIG2JwGWQ_CFNOOVi1M4rVv852o6iqJcizB8dDZ7FsIqHmg7Pxac72rpXtbMGJY-NCkF-esTEWGLMpMkCL2283Q3F5BC8U/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #ccc;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}
#searcha input[type="text"]:focus{background:#FFF}
#searcha input[type="submit"]{display:none}
h1,h2,h3,h4{font-weight:700;font-family:'Open Sans', cursive;}
ul.isocial{list-style:none;margin:0;padding:5px 20px 0 0}
ul.isocial li{float:right;margin:0 5px;padding:0}
ul.isocial li a{float:right;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4Q7OL9l12Cn68t4TiL6fE7hLL22CqrOLxQgG4OM4cn8eBkzqr2F46vLAOoO_Ulul8OFSMMVZCYqKAvgM1fRySY65D8HxUBVx4pKKyZvu3XQG10PoXq8VxUlVaXyOP2A_Pf1xAU9gEGE/s1600/social+letter.png);background-position:0 0;background:repeat:no-repeat;display:inline-block;text-indent:-9999px;overflow:hidden;width:24px;height:24px;position:relative}
ul.isocial li a.rss{background-position:0 0}
ul.isocial li a.rss:hover{background-position:0 -25px}
ul.isocial li a.facebook{background-position:-25px 0}
ul.isocial li a.facebook:hover{background-position:-25px -25px}
ul.isocial li a.twitter{background-position:-50px 0}
ul.isocial li a.twitter:hover{background-position:-50px -25px}
ul.isocial li a.google{background-position:-75px 0}
ul.isocial li a.google:hover{background-position:-75px -25px}
ul.isocial li a.youtube{background-position:-100px 0}
ul.isocial li a.youtube:hover{background-position:-100px -25px}
<div id='fixed'>
<div id='fixedinner'>
<div class='toppica'>
<div class='topnav'>
<div style='font:bold 16px Verdana;float:left;padding-top:8px;color:#aaa;'>
Selamat Datang Di Kuplay Comunity & Club
</div>
<div id='searcha'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
<div style='float:right;padding:0px 0px 5px 0px;'>
<ul class='isocial'>
<li><a class='rss' href='#'_blank' title='Email'/></li>
<li><a class='facebook'#'_blank' title='Facebook'/></li>
<li><a class='twitter' href='#'/></li>
<li><a class='google' href='#' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='#' target='_blank' title='Video'/></li>
</ul>
</div>
</div>
</div></div>
</div>
<div id='fixedinner'>
<div class='toppica'>
<div class='topnav'>
<div style='font:bold 16px Verdana;float:left;padding-top:8px;color:#aaa;'>
Selamat Datang Di Kuplay Comunity & Club
</div>
<div id='searcha'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
<div style='float:right;padding:0px 0px 5px 0px;'>
<ul class='isocial'>
<li><a class='rss' href='#'_blank' title='Email'/></li>
<li><a class='facebook'#'_blank' title='Facebook'/></li>
<li><a class='twitter' href='#'/></li>
<li><a class='google' href='#' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='#' target='_blank' title='Video'/></li>
</ul>
</div>
</div>
</div></div>
</div>
Yang Berwarna :
Merah : Bisa Di Ganti Sesuai Yang Anda InginkanKuning : Diganti Dengan Profil Yahoo Anda Sendiri
Hijau : Diganti Dengan Link Profil Facebook Anda Sendiri
Biru : Diganti Dengan Link Twitter Anda Sendiri
Ungu : Diganti Dengan Link Google Acount Anda Sendiri
Orange : Diganti Dengan Link Youtube Anda Sendiri
Selesai.
Sumber Dari: http://kuplay-45.blogspot.com/p/cara-membuat-search-di-blog-m-enu.html#ixzz3NUqZ1Gv6
+(FILEminimizer).jpg)
