© 2019 BungMais. All rights reserved. Design by: BungMais.com

Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive

Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive

Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive.

KODE-KODE Header Blog plus Navigasi Menu dan Kotak Pencarian Responsive berikut ini diambil dari template demo Iwata Blogger Theme. Kodenya sudah sedikit dimodifikasi sehingga tampilannya menjadi ibarat gambar berikut ini:

Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive
Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive

Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive

Cara membuat header blog plus menu dan kotak pencarian responsive ibarat di atas, tentu saja Anda harus hapus dulu kode-kode header yang ada, lalu pasang kode-kode berikut ini.

KODE CSS:
Copas di atas kode ]]>
body#layout .siteheadersec,body#layout .header {width:100%;height:auto;}
.header{padding:20px 0;position:relative}
.header .cover{display:block;position:absolute;top:0;right:0;bottom:0;left:0}
.header.bg-image{background-size:cover;background-position:center}
.header.bg-image .cover{opacity:.65}
.Header h1 {width:300px}
.siteheadersec{width:33.33%;padding-right:40px;position:absolute;bottom:-16px;left:0}
.site-title{font-size:1.75em;line-height:110%;font-weight:500}
.site-title a{color:#fff}
.site-title a:hover{color:#fff}
.site-description{display:none}
.search-toggle{display:block;font-size:22px;color:rgba(255,255,255,0.7);position:absolute;bottom:-4px;right:0}
.search-toggle:hover,.search-toggle.active{color:#fff;cursor:pointer}
.header-search{background:#fff;border-bottom:1px solid #eee}
.header-search .search-field{display:block;width:100%;margin:0;padding:45px 0;border:none;background:none;font-family:'Open Sans',sans-serif;font-size:1.5em;font-style:italic;position:relative;color:#333}
.header-search .search-field:focus{outline:none}
.main-menu{margin:0 48px 0 33.33%;float:none}
.main-menu li{position:relative}
.main-menu > li{float:left;margin-right:30px}
.main-menu > li > a{display:block;font-weight:400;color:#fff}
.main-menu > li.menu-item-has-children > a{padding-right:14px}
.main-menu > li.menu-item-has-children:after{content:"";display:block;border:4px solid transparent;border-top-color:rgba(255,255,255,0.7);position:absolute;top:50%;margin-top:-2px;right:0}
.main-menu a:hover,.main-menu > li.menu-item-has-children:hover > a,.main-menu .current_menu_item > a,.main-menu .current_page_item > a{color:#fff}
.main-menu > li.menu-item-has-children:hover:after{border-top-color:#fff}
.main-menu ul{position:absolute;z-index:10000;display:block;left:-9999px;padding-top:15px;top:30px;opacity:0;z-index:999;-webkit-transition:opacity .3s ease-in-out,top .3s ease-in-out;-moz-transition:opacity .3s ease-in-out,top .3s ease-in-out;-ms-transition:opacity .3s ease-in-out,top .3s ease-in-out;-o-transition:opacity .3s ease-in-out,top .3s ease-in-out;transition:opacity .3s ease-in-out,top .3s ease-in-out}
.main-menu > li > ul:before{content:"";display:block;position:absolute;z-index:1000;top:1px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom-color:#222}
.main-menu ul .menu-item-has-children::after{content:"";display:block;border:5px solid transparent;border-left-color:rgba(255,255,255,0.4);position:absolute;z-index:1001;right:10px;top:50%;margin-top:-5px}
.main-menu ul .menu-item-has-children:hover::after{border-left-color:#222;right:-10px}
.main-menu ul li{width:220px;background:#222;text-align:center}
.main-menu ul li:first-child{border-radius:3px 3px 0 0}
.main-menu ul li:last-child{border-radius:0 0 3px 3px}
.main-menu ul a{display:block;padding:20px;line-height:130%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,0.075);font-size:1rem;font-style:italic;color:#fff}
.main-menu ul a:hover{color:#0093C2}
.main-menu ul > li:last-child > a{border-bottom-width:0}
.main-menu > li:hover > ul{opacity:1;left:50%;margin-left:-110px;top:20px}
.main-menu ul ul{padding-top:0;top:10px}
.main-menu ul ul li{background:#333}
.main-menu ul ul .menu-item-has-children:hover::after{border-left-color:#333}
.main-menu ul ul ul li{background:#444}
.main-menu ul ul ul .menu-item-has-children:hover::after{border-left-color:#444}
.main-menu ul ul ul ul li{background:#555}
.main-menu ul ul ul ul .menu-item-has-children:hover::after{border-left-color:#555}
.main-menu ul ul ul ul ul li{background:#666}
.main-menu ul ul ul ul ul .menu-item-has-children:hover::after{border-left-color:#666}
.main-menu li > ul > li:hover > ul{opacity:1;top:0;left:220px;margin-left:0}
@media (max-width: 930px) {
.header{padding:40px 0}
.site-title{width:100%;padding-right:64px;position:static}
.main-menu,.search-toggle{display:none}
.nav-toggle{display:block;width:44px;height:44px;border-radius:99px;border:2px solid #fff;position:absolute;top:50%;margin-top:-22px;right:0}
.nav-toggle .bar{width:20px;height:2px;background:#fff;border-radius:1px;position:absolute;left:50%;margin-left:-10px;top:50%;-webkit-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-webkit-transform .2s linear 0;-moz-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-moz-transform .2s linear 0;-o-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-o-transform .2s linear 0;transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,transform .2s linear 0}
.nav-toggle .bar:nth-child(1){margin-top:-7px}
.nav-toggle .bar:nth-child(2){margin-top:-1px}
.nav-toggle .bar:nth-child(3){margin-top:5px}
.nav-toggle:hover{cursor:pointer}
.nav-toggle.active{background:#fff}
.nav-toggle.active .bar{background:#00A0D7;-webkit-transition:opacity .2s linear 0s,margin .2s linear 0s,-webkit-transform .2s linear .2s;-moz-transition:opacity .2s linear 0s,margin .2s linear 0s,-moz-transform .2s linear .2s;-o-transition:opacity .2s linear 0s,margin .2s linear 0s,-o-transform .2s linear .2s;transition:opacity .2s linear 0s,margin .2s linear 0s,transform .2s linear .2s}
.nav-toggle.active .bar:nth-child(1),.nav-toggle.active .bar:nth-child(3){margin-top:-1px}
.nav-toggle.active .bar:nth-child(1){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.nav-toggle.active .bar:nth-child(2){-webkit-opacity:0;-moz-opacity:0;opacity:0}
.nav-toggle.active .bar:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.nav-toggle:hover{cursor:pointer}
.mobile-menu{padding:35px 7%;position:relative;background:#333}
.mobile-menu li{margin-top:10px}
.mobile-menu > li:first-child{margin-top:0}
.mobile-menu .sub-menu{margin-left:30px}
.mobile-menu a{display:block;padding:10px 0;font-size:1em;color:#888}
.mobile-menu a:hover,.mobile-menu .current-menu-item a{color:#fff}
.mobile-search{position:relative;background:#444}
.mobile-search .search-field{width:93%;padding:35px 60px 35px 7%;margin:0;background:none;border:none;font-family:'Open Sans',sans-serif;font-size:1em;font-style:italic;color:#fff}
.mobile-search .search-field:focus{outline:none}
.mobile-search .search-button{display:block;padding:10px;font-size:22px;color:#999;position:absolute;top:50%;margin-top:-23px;right:7%}
.mobile-search .search-button:hover{cursor:pointer;color:#fff}
}
@media (max-width: 600px) {
.header {padding:25px 0}
.site-title{margin-right:60px;font-size:1.5em}
.nav-toggle{width:40px;height:40px;margin-top:-20px}
.mobile-menu{padding:25px 7%}
.mobile-menu li{margin-top:5px}
.mobile-search .search-field{padding:25px 60px 25px 7%}
}
@media (max-width:320px) {
.site-title{font-size:1.35em;position:relative;left:auto;bottom:-1px}
}
@media print {
.header {display:none!important}
}

KODE HTML:
Copas di bawah isyarat atau di atas isyarat
 dan sejenisnya (posisi header).




 
   
     
      0
      325
      false
      false
      BEHIND
      0
   

   
 
   
     
     

       
         
       

     

   
     
     

       

         


           
         


       

       
     

   

 
   
   

     

       


         
       


     

     
   

 


   
   



   


 




KODE JAVASCRIPT:
Copas di atas kode  atau

Catatan:
- Pastikan sudah ada link ke isyarat jQuery 
- Pastikan sudah ada link ke Awesome Font

Demikian cara membuat header blog plus menu dan kotak pencarian responsive musim desain blog periode kini. Good Luck & Happy Blogging!

Posting Komentar

0 Komentar

-------- MASUKAN KODE IKLAN 1 --------
-------- MASUKAN KODE IKLAN 2 --------
-------- MASUKAN KODE IKLAN 3 --------