Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive

Baca Juga

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 seperti gambar berikut ini:

Cara membuat header blog plus menu dan kotak pencarian responsive seperti 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 ]]></b:skin>

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 kode <body> atau di atas kode <div class='main'> dan sejenisnya (posisi header).

<div class='header section'>
<div class='cover bg-accent'/>
<div class='section-inner'>
<b:section class='siteheadersec' id='siteheadersec' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Simple Trend BT (Header)' type='Header' version='1'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'/>
      <b:widget-setting name='displayHeight'>0</b:widget-setting>
      <b:widget-setting name='sectionWidth'>325</b:widget-setting>
      <b:widget-setting name='useImage'>false</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
      <b:widget-setting name='displayWidth'>0</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
      <!--Show just the image, no text-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block;padding-left:0px;padding-top:0px;'/>
        </a>
      </div>
    <b:else/>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <div expr:style='&quot;background-image: url(&quot;&quot; + data:sourceUrl + &quot;&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height + &quot;px;&quot;                      + &quot;_height: &quot; + data:height + &quot;px;&quot;                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='site-title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='site-title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
    <b:includable id='description'>
    <h2 class='site-description'><data:description/></h2>
</b:includable>
    <b:includable id='title'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:includable>
  </b:widget>
</b:section>
<a class='search-toggle' href='#' title='Click to view the search field'><span class='fa fw fa-search'/></a>
<a class='nav-toggle hidden' href='#' title='Click to view the navigation'>
<div class='bars'><div class='bar'/><div class='bar'/><div class='bar'/></div>
</a> <!-- /nav-toggle -->
<ul class='main-menu'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='/p/about.html'>About</a></li>
  <li><a href='/p/kontak.html'>Kontak</a></li>
  <li><a href='/p/disclaimer.html'>Disclaimer</a></li>
<li class='menu-item-has-children'><a href='#'>Categories</a>
<ul class='sub-menu'>
<li><a href='/search/label/Blogging?&amp;max-results=5'>Blogging</a></li>
<li><a href='/search/label/SE)?&amp;max-results=5'>SEO</a></li>
<li><a href='/search/label/Template?&amp;max-results=5'>Templates</a></li>
<li><a href='/search/label/Widget?&amp;max-results=5'>Widget</a></li>
<li><a href='/search/label/AdSense?&amp;max-results=5'>AdSense</a></li>
</ul>
</li>
</ul>
<div class='clear'/>
</div> <!-- /section-inner -->
</div> <!-- /header -->
<form action='/search' class='header-search section hidden' method='get' role='search'>
<div class='section-inner'>
<input class='search-field' name='q' placeholder='Type and press enter' type='search'/>
</div> <!-- /section-inner -->
</form> <!-- /header-search -->
<ul class='mobile-menu hidden'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='/p/about.html'>About</a></li>
  <li><a href='/p/kontak.html'>Kontak</a></li>
  <li><a href='/p/disclaimer.html'>Disclaimer</a></li>
<li class='menu-item-has-children'><a href='#'>Categories</a>
<ul class='sub-menu'>
<li><a href='/search/label/Blogging?&amp;max-results=5'>Blogging</a></li>
<li><a href='/search/label/SE)?&amp;max-results=5'>SEO</a></li>
<li><a href='/search/label/Template?&amp;max-results=5'>Templates</a></li>
<li><a href='/search/label/Widget?&amp;max-results=5'>Widget</a></li>
<li><a href='/search/label/AdSense?&amp;max-results=5'>AdSense</a></li>
  </ul></li>
</ul> <!-- /mobile-menu -->
<form action='/search' class='mobile-search section hidden' method='get' role='search'>
<input class='search-field' name='q' placeholder='Type and press enter' type='search'/>
<a class='search-button' onclick='document.getElementById(&apos;search-form&apos;).submit(); return false;'><span class='fa fw fa-search'/></a>
</form> <!-- /mobile-search -->

KODE JAVASCRIPT:
Copas di atas kode </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
// Dropdown menus on touch devices
$( '.main-menu li:has(ul)' ).doubleTapToGo();
// Toggle mobile menu and mobile search
$(".nav-toggle").on("click", function(){ $(this).toggleClass("active");
$(".mobile-menu").slideToggle('300');
$(".mobile-search").slideToggle('300');
return false;
});
// Toggle header search
$(".search-toggle").on("click", function(){ $(this).toggleClass("active");
$(".header-search").slideToggle();
if ($(this).hasClass("active")) {
$(".header-search .search-field").focus();
} else {
$(".header-search .search-field").blur();
}
return false;
});
// Hide mobile > 930 and header search < 930
$(window).resize(function() {
if ($(window).width() > 930) {
$(".nav-toggle").removeClass("active");
$(".mobile-menu").hide();
$(".mobile-search").hide();
}
if ($(window).width() < 930) {
$(".search-toggle").removeClass("active");
$(".header-search").hide();
}
});
//]]>
</script>

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

Demikian cara membuat header blog plus menu dan kotak pencarian responsive trend desain blog masa kini. Good Luck & Happy Blogging! (www.contohblog.com).*