2. Dashboard - Template
3. Edit HTML
Proses Pembuatan :
1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/* HEADER MENU */ .menu-header { display:none; padding:0 15px; height:48px; line-height:48px; color: #fff !important; border-radius:$(curvature.border.radius); } .menu-dropdowns { font-family:sans-serif; background:#374760; font-weight:bold; text-transform:uppercase; height:60px; line-height:50px; border-radius:4px; padding:2px; } .nav-menu2 { padding:5px; background:#374760; list-style: none; margin:0 0 0 0; *zoom: 1; float:left; border-radius:$(curvature.border.radius); } .nav-menu2:before, .nav-menu2:after { content: " "; display: table; } .nav-menu2:after { clear: both; } .nav-menu2 ul { list-style: none; margin:0 0 0 0; width:auto; white-space:nowrap; border-radius:$(curvature.border.radius); } .nav-menu2 a { display:block; padding:0 15px; border-radius:$(curvature.border.radius); } .nav-menu2 li { position: relative; margin:0 0; border-radius:$(curvature.border.radius); } .nav-menu2 > li { float: left; margin:2px; } .nav-menu2 > li > a { color:#fff; display: block; height:48px; line-height:48px; color:$(menu.navigation.text.color); box-shadow: 0 4px 0 #374760 inset; } .nav-menu2 > li > a.active { background:#374760; box-shadow: 0 4px 0 #374760 inset; } .nav-menu2 > li:hover > a { background:#36a7f2; box-shadow: 0 4px 0 #374760 inset; border-radius:4px; } .nav-menu2 li ul { background:#fff; display:block; position:absolute; left:0; z-index:10; visibility:hidden; opacity:0; -webkit-transition:all .25s ease-out; -moz-transition:all .25s ease-out; -ms-transition:all .25s ease-out; -o-transition:all .25s ease-out; transition:all .25s ease-out; box-shadow:0 0 4px rgba(0,0,0,0.3); } .nav-menu2 li li ul { left:100%; top:-1px; } .nav-menu2 > li.hover > ul { visibility:visible; opacity:10; } .nav-menu2 > li > ul:before { content:""; width:0px; height:0px; position:absolute; bottom:100%; left:20px; border-width:8px; border-style:solid; border-color:transparent transparent #fff transparent; display:block; } .nav-menu2 li li.hover ul { visibility:visible; opacity:10; } .nav-menu2 li li a { margin-left:-45px; display: block; color:#333; position: relative; z-index:100; line-height:32px; } .nav-menu2 li li a:hover { background:#374760; } .nav-menu2 li li li a { background:#fff; z-index:20; color:#333; } .nav-menu2 li .parent:after { content: "\f107"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-left:6px; } /* SEARCH FORM */ #search-form { background:#374760; float:right; margin:0 0; width:220px; border-radius:$(curvature.border.radius); } #search-form table { width:100%; margin:0 0 0 0; } #search-form td.search-box { padding-right:30px; background:#374760; border-radius:4px; } #search-form input#search-box[type="text"] { background:#fff; height:36px; line-height:36px; margin:5px 0 5px 10px; padding:0 10px; width:99%; color:#000); border:none; text-transform: uppercase; border-radius:4px; } #search-form input#search-button[type="submit"] { font-family: FontAwesome; background:#fff; color:$(button.color); height:36px; line-height:36px; margin:5px 10px 5px 0; padding:0 12px; border:none; outline:none; transition:all 0.25s; -moz-transition:all 0.25s; -webkit-transition:all 0.25s; border-radius:4px; } #search-form input#search-button[type="submit"]:hover{ cursor:pointer; } #search-form input#search-box[type="text"]:focus { background:#eee; outline:none; } /* MEDIA QUERY */ @media only screen and (max-width:1066px){ #wrapper { margin:0 auto; } } @media only screen and (max-width:768px){ #wrapper { padding:12px; } #post-wrapper, #sidebar-wrapper, .nav { float:none; width:100%; max-width:100% } .active { display: block; } #search-form { width:100%; margin:10px 0 0 0 !important; } .nav li ul:before { display:none; } .nav > li { float: none; overflow:hidden; } .nav ul { display: block; width: 100%; float:none; } .nav-menu2 ul { white-space:normal !important; } .nav-menu2 li ul { background:#eee; border:none; box-shadow:none; } .nav-menu2 li li ul { background:#f5f5f5; } .nav-menu2 li li a:hover { background:#ddd; } .nav > li.hover > ul , .nav li li.hover ul { position: static; } #search-form { width:100%; background:$(menu.background.color); } #search-form td.search-box { padding:0 10px !important; } #search-form td.search-button { background:#374760; padding:0 10px; width:1%; border-radius:4px; } #search-form input#search-box[type="text"] { margin:0 0 0 0; } #search-form input#search-button[type="submit"] { margin:0 0 0 0; } .img-thumbnail { margin:3px 10px 3px 0; } .sidebar-container, .post-container { padding:15px 0 0px; } }4. Copy & Paste kode berikut ini dan letakkan diatas kode salah satu kode diatas.
<!-- hidangan header start--> <nav class='menu-dropdowns'> <a class='menu-header' href='#'><i class='fa fa-th-list'/> MENU </a> <!-- secondary navigation hidangan start --> <ul class='nav nav-menu2'> <li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li> <li><a href='#'><i class='fa fa-wrench'/> Menu</a><i/> <ul> <li><a href='####'>Menu 1</a></li> <li><a href='####'>Menu 2</a></li> <li><a href='####'>Menu 3</a></li> <li><a href='####'>Menu 4</a></li> <li><a href='####'>Menu 5</a></li> <li><a href='####'>Menu 6</a></li> <li><a href='####'>Menu 7</a></li> </ul> </li> <li><a href='####'><i class='fa fa-pencil'/> Menu 2</a><i/> <ul> <li><a href='####'>Menu 1</a></li> <li><a href='####'>Menu 2</a></li> <li><a href='####'>Menu 3</a></li> <li><a href='####'>Menu 4</a></li> </ul> </li> <li><a href='####'>Menu 3</a></li> <li><a href='####'>Menu 4</a></li> <li><a href='####'>Menu 5</a></li> <li><a href='####'>Menu 6</a></li> </ul> <!-- secondary navigation hidangan end --> <form action='/search' id='search-form' method='get'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form> </nav> <div class='clear'/> <!-- hidangan header end --6. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>
<script type='text/javascript'> //<![CDATA[ var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-header").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-header").css("display","inline-block");if(!$(".menu-header").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-header").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}} //]]> </script>Demikian Tutorial Blogger kali ini, jikalau terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda, hidangan tersebut udah muncul atau belum. . Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Menu Header Plus Tombol Search Responsive
Incomming Search:
Cara Membuat Menu Header, Cara Membuat Menu, Cara Membuat Header Menu, Cara Membuat Top Menu Navigasi, Cara Membuat Menu Header Responsive, Cara Membuat Menu Navigasi, Cara Membuat Menu Navigasi Header, Cara Membuat Menu Responsive
