Tutorial mudah Membuat Navigasi menu header blog responsive / mobile friendly

Untuk mempermudah pengunjung membaca dan mencari artikel blog yang dibutuhkan, kalian di sarankan untuk membuat tampilan navigasi menu dropdown  responsive.

Menu navigasi akan secara otomatis tersembunyi di satu icon menu yang biasa dinamakan icon burger. Cara membuat menu navigasi responsive akan saya jelaskan beserta tutorial step by step.

Ini adalah tampilan navigasi menu header ketika di lihat melalui browser PC/Laptop 

Dan ini adalah tampilan ketika dibuka melalui smartphone/mobile

Cara ini mudah dan aman , namun sebelum mempraktekkan , terlebih dahulu disarankan untuk mem-backup  template kalian . Kalau perlu sebelum menerapkan cara ini di blog kalian , buatlah blog contoh untuk bahan praktek. Sehingga tidak khawatir ketika nanti terjadi error / kalian tidak suka dengan tampilan menunya dan ingin mengganti ke tampilan menu kalian sebelumnya.

Baik, langsung saja kita mulai, ikuti step by step. 

Langkah pertama (1) :

1. Copy script css dibawah ini 

#menu{background:#005c99;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#000000;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}\

Langkah ke dua (2)

1. Buka blog  > tema > edit html.
2. klik kursor diarea kode html dimanapun lalu tekan ctrl+F untuk memunculkan kotak pencarian di bilah kanan atas area kode > lalu ketikkan <b:skin> , Enter
3. Buka lebih banyak kode didalamnya Dan paste script di langkah pertama (1) tepat diatas kode ]]></b:skin>

Langkah ke tiga (3)

1. Copy script html dibawah ini dan paste di bawah kode </header>, jika sulit mencarinya, lakukan seperti langkah ke dua (2) point 2 untuk menemukan kode tersebut

 <nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>MENU</span></label>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#/search/label/Nama Labels' title='Nama Labels'>Nama Menu</a></li>
<li><a class='prett' href='#' title='Nama Labels A'>Nama Menu</a>
<ul class='menus'>
<li><a href='#/search/label/Sub Nama LabelsA1' title='Nama LabelsA1'>sub menu</a></li>
<li><a href='#/search/label/Sub Nama LabelsA2' title='Nama LabelsA2'>sub menu</a></li>
<li><a href='#/search/label/Sub Nama LabelsA3' title='Nama LabelsA3'>sub menu</a></li>
<li><a href='##/search/label/Sub Nama LabelsA4' title='Nama LabelsA4'>sub menu</a></li>
<li><a href=#/search/label/Sub Nama LabelsA5' title='Nama LabelsA5'>sub menu</a></li>
<li><a href='#/search/label/Sub Nama LabelsA6' title='Nama LabelsA6'>sub menu</a></li>
</ul>
</li>
<li><a class='prett' href='#' title='Nama Labels B'>Nama Menu</a>
<ul class='menus'>
<li><a href='#/search/label/Sub Nama Labels B1' title='Nama LabelsB8'>sub menu</a></li>
<li><a href='#/search/label/Sub Nama Labels B2' title='Nama LabelsB9'>sub menu</a></li>
<li><a href='#/search/label/Sub Nama Labels B3' title='Nama LabelsB10'>sub menu</a></li>
</ul>
</li>
<li><a href='#/search/label/Nama Labels C' title='Nama LabelsC11'>Nama Menu</a></li>
<li><a href='#/search/label/Nama Labels D' title='Nama LabelsD12'>Nama Menu</a></li>
<li><a href='#/search/label/Nama Labels E' title='Nama LabelsE13'>Nama Menu</a></li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>

Langkah ke (4)
Jangan simpan tema terlebih dahulu , rubahlah script html yang telah di tandai dengan warna-warna. Untuk mempermudah saya berikan keterangan kode yang harus dirubah  :

1. Tanda # (warna biru) = rubahlah dengan  url blog kalian
2. Nama Menu (warna merah) adalah nama menu utama
3. Link labels (warna kuning) Adalah nama labels dari setiap postingan. ubah sesuai menu labels yang kalian ingini. misalkan saya ingin nama labels dan nama menu utama saya Tutorial HP maka : <li><a class='prett' href='#' title='Tutorial HP'>Tutorial HP</a>
4. nama labels Sub menu (Warna hijau) adalah nama label yang berada di dalam menu utama, ganti yang berwarna hijau dengan nama sub menu kalian, misalkan saya pada nomor dua (2) menulis nama menu utama Tutorial HP, dan ingin menambah sub menu yaitu contoh:

       <li><a href='https://adisudrajat28.blogspot.co.id/smartfren' title='smartfren'>smartfren</a></li>

         Nanti akan muncul di menu seperti gambar dibawah ini:

   

      4 Kode  yang berwarna ungu pada script CSS di langkah pertama adalah kode color html
         background warna latar , ubahlah sesuai keinginan kalian dengan mencari kode color html di
         mbah google.
       

Jika sudah selesai , save dan lihat blog. semoga berhasil dan semoga bermanfaat.

Terima kasih.