Cara Membuat Navbar Responsive Flexbox Keren di Blogger

Maafkan saya sebelumnya karena jarang update akhir-akhir ini, cukup banyak kesibukan yang harus saya selesaikan, terkadang ada sih waktu luang tetapi mau bagaimana lagi kalau hati gak ada niat buat update artikel.

Jika kalian perhatikan di website atau blog ini terkadang ada perubahan dari segi tampilan, itu karena saya mengganti temanya, dan saya juga yang membuat temanya.

Saya sendiri masih menggunakan platform blogger untuk ngeblog, dan share good stuff kepada anda, dan untuk temanya memang harus di desain khusus.

Kalian yang memang sudah lama menggunakan platform blogger akan tahu sendiri, bagaimana tingkat kesulitannya, karena untuk markup language yang digunakan adalah XHTML.

Panduan Membuat Navbar di Blogger

Membuat Navbar Responsive Sederhana Untuk Blogger

Karena dengan kemampuan ini, rasanya tidak enak kalau saya simpan sendiri. Akan lebih baik jika saya membagikannya kepada anda.

Di postingan kali ini saya akan memberikan tutorial membuat navbar (navigasi bar/ menu navigasi) responsive untuk anda yang kebetulan sama dengan saya memakai platform blogger.

Pastikan anda sudah menggunakan tema layoutVersion 3 dan default Widget version 2. Jika anda masih menggunakan tema yang lama silahkan di coba saja, kemungkinan besar bisa juga.

Langkah - langkah

  • Buka Blogger Dashboard
  • Pilih Menu Theme
  • Click Edit HTML
  • Masukkan code css ini diatas tag

.header {
background: #FFF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
padding: 15px 20px;
-webkit-box-shadow: 1px 0px 4px rgba(0,0,0,0.3);
        box-shadow: 1px 0px 4px rgba(0,0,0,0.3);
}
.header-widget .header-image-wrapper img {
 width: 150px;
 height: auto;
 display: inline-block;
 margin-right: 20px;
 padding-right: 10px;
}
.navbar-menu {
list-style-type: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
.navbar-link {
 text-decoration: none;
 color: #333;
 text-transform: uppercase;
 font-size: 16px;
 display: inline-block;
 margin-right: 1.5rem;
}
.navbar-link:hover {
 color: #4260f5;
}
.PageList .title , .BlogSearch .title {
 display: none;
}
.BlogSearch {
 margin-left: auto;
}
.BlogSearch .widget-content form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
.search-input > input {
 padding: 7px 10px;
 font-size: 15px;
 border-width: 0.5px;
 border-color: rgba(0,0,0,0.2);
 outline: 0;
 border-radius: 3px;
 margin-right: 5px;
}
.search-action {
 background: transparent;
 padding: 5px 10px;
 font-size: 17px;
 border: 0.5px solid rgba(0,0,0,0.3);
 border-radius: 3px;
}
.search-action:hover {
 background: #4260f5;
 color: #FFF;
}
.search-action:hover > svg.search-icon path {
 fill: #FFF;
}
svg.search-icon {
 width: 15px;
 height: auto;
}
.menu-button {display: none;}
@media (max-width: 1024px) {
 .menu-button {
  display: inline-block;
 }
 .header {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
 }
 .widget.Header, .header-widget {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
 }
 .navbar-menu {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
 }
 .navbar-link {
  margin: 1rem 0;
 }
 .BlogSearch { margin-left: 0; }
 .search-input > input { width: 100% }
 .PageList, .BlogSearch {
  display: none;
 }
 .show-me {
  display: block;
 }
 .menu-button {
  background: transparent;
  border: none;
  outline: 0;
  padding: 3px 6px;
 }
 .menu-icon {
  width: 15px;
  height: auto;
  vertical-align: middle;
 }
 .menu-button svg path {
  fill: rgba(0,0,0,0.5);
 }
 .menu-clicked svg path {
  fill: #222;
 }
}
@media (max-width: 768px) {
 .search-action {display: none;}
}

  • Tempatkan code ini tepat dibawah tag <body>, sebelumnya anda lebih baik menghapus terlebih dahulu navbar yang versi lama (jika ada)

<b:section class="header" id="max-header" showaddelement="yes">
    <b:widget id="Header1" locked="true" title="Geonome (Header)" type="Header" version="2" visible="true">
      <b:widget-settings>
        <b:widget-setting name="displayUrl">http://2.bp.blogspot.com/-aFhFozn76To/XSCe4nO5U1I/AAAAAAAABdg/9Ugno5kLJlEhpf-AYB2CIjReHwMrdSlqACK4BGAYYCw/s1600/deediy.svg.png</b:widget-setting>
        <b:widget-setting name="displayHeight">78</b:widget-setting>
        <b:widget-setting name="sectionWidth">790</b:widget-setting>
        <b:widget-setting name="useImage">true</b:widget-setting>
        <b:widget-setting name="shrinkToFit">false</b:widget-setting>
        <b:widget-setting name="imagePlacement">REPLACE</b:widget-setting>
        <b:widget-setting name="displayWidth">257</b:widget-setting>
      </b:widget-settings>
      <b:includable id="main" var="this">
    <div class="header-widget">
      <b:include cond="data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}" name="image">
      <b:include cond="data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}" name="title">
      <b:include cond="data:imagePlacement != &quot;REPLACE&quot;" name="description">
      <button aria-label="Menu Button" class="menu-button" data-menu="#PageList1" data-search="#BlogSearch1">
<svg class="menu-icon" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
 </button>
    </b:include></b:include></b:include></div>
<b:include cond="data:imagePlacement == &quot;BEHIND&quot;" name="behindImageStyle">
  </b:include></b:includable>
      <b:includable id="behindImageStyle">
    <b:if cond="data:sourceUrl">
      <b:include cond="data:this.image" data="{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }" name="responsiveImageStyle">
      <style type="text/css">
        .header-widget {
          background-position: <data:blog.locale.languageAlignment/>;
          background-repeat: no-repeat;
        }
      </style>
    </b:include></b:if>
  </b:includable>
      <b:includable id="description">
          <data:this .description="">
    </data:this>
</b:includable>
      <b:includable id="image">
    <a class="header-image-wrapper" expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">
      <b:include data="{                                                 image: data:image,                                                 altText: data:blog.title.escaped,                                                 originalWidth: data:width,                                                 originalHeight: data:height                                               }" name="responsiveImage">
    </b:include></a>
  </b:includable>
      <b:includable id="title">
    <h1>
      <b:tag cond="data:view.url != data:blog.homepageUrl" expr:href="data:blog.homepageUrl" name="a">
        <data:title>
      </data:title></b:tag>
    </h1>
</b:includable>
    </b:widget>
    <b:widget id="PageList1" locked="true" title="Pages" type="PageList" version="2" visible="true">
      <b:widget-settings>
        <b:widget-setting name="pageListJson">&lt;![CDATA[{'home': {'href': 'https://geonome-demo.blogspot.com/', 'title': 'Home', 'position': 0}, 'link0': {'href': '#', 'title': 'About', 'position': 1}, 'link1': {'href': '#', 'title': 'Contact', 'position': 2}}]]&gt;</b:widget-setting>
        <b:widget-setting name="homeTitle">Home</b:widget-setting>
      </b:widget-settings>
      <b:includable id="main">
  <b:include name="widget-title">
  <b:include name="content">
</b:include></b:include></b:includable>
      <b:includable id="content">
  <div class="widget-content">
    <b:include name="pageList">
  </b:include></div>
</b:includable>
      <b:includable id="overflowButton">
  <b:include name="verticalMoreIcon">
</b:include></b:includable>
      <b:includable id="overflowablePageList">
  <div class="overflowable-container">
    <div class="overflowable-contents">
      <div class="container">
        <b:with value="true" var="overflow">
        <b:with value="&quot;tabs&quot;" var="pageListClass">
          <b:include name="pageList">
        </b:include></b:with>
        </b:with>
      </div>
</div>
<div class="overflow-button hidden">
      <b:include name="overflowButton">
    </b:include></div>
</div>
</b:includable>
      <b:includable id="pageLink">
<li>      <b:class cond="data:overflow" name="overflowable-item">      <b:class cond="data:link.isCurrentPage" name="selected">        <a class="navbar-link" expr:href="data:link.href" href="https://www.blogger.com/null"><data:link .title=""></data:link></a>    </b:class></b:class></li>
</b:includable>
      <b:includable id="pageList">
  <ul class="navbar-menu"><b:class cond="data:pageListClass" expr:name="data:pageListClass">     <b:loop values="data:links" var="link">       <b:include name="pageLink">     </b:include></b:loop>   </b:class></ul>
</b:includable>
    </b:widget>
    <b:widget id="BlogSearch1" locked="true" title="Search This Blog" type="BlogSearch" version="2" visible="true">
      <b:includable id="main">
  <b:include name="widget-title">
  <b:include name="content">
</b:include></b:include></b:includable>
      <b:includable id="content">
  <div class="widget-content" role="search">
    <b:include name="searchForm">
  </b:include></div>
</b:includable>
      <b:includable id="searchForm">
  <form expr:action="data:blog.searchUrl">
    <b:attr cond="not data:view.isPreview" name="target" value="_top">
    <b:include name="urlParamsAsFormInput">
    <div class="search-input">
      <input autocomplete="off" expr:aria-label="data:messages.searchThisBlog" expr:placeholder="data:messages.searchThisBlog" expr:value="data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;" name="q" />
    </div>
<b:include name="searchSubmit">
  </b:include></b:include></b:attr></form>
</b:includable>
      <b:includable id="searchSubmit">
  <button class="search-action" type="submit"><svg class="search-icon" viewbox="0 0 512 512" width="25px" xmlns="http://www.w3.org/2000/svg"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></button>
</b:includable>
    </b:widget>
  </b:section>

  • Letakkan code javascript ini tepat diatas tag </body>

<script>//<![CDATA[
var menuButton = document.querySelector('.menu-button');
  menuButton.addEventListener('click', function() {
 document.querySelector(menuButton.dataset.menu).classList.toggle('show-me');
 document.querySelector(menuButton.dataset.search).classList.toggle('show-me');
 this.classList.toggle('menu-clicked');
  })
//]]></script>


  • Jika selesai anda tinggal Klik Simpan Tema atau Save Theme
Hasilnya :

navbar blogger responsive sederhana (desktop)
Navbar Versi Desktop

navbar blogger responsive sederhana (mobile)
Navbar Versi Mobile

Tips ! untuk logo bisa diubah melalui menu layout dan pilih page header widget, checklist instead of title and description dan upload logo anda.

Rekomendasi Untuk Anda

Comments

About This Blog

MaxRooted, sebuah blog yang menyediakan banyak sekali tutorial seputar teknologi mulai dari android, komputer khususnya linux, tips unik, trik terbaru, dan lain lain.

Pages

Subscribe