Membuat Menu Bar Dropdown Responsive Plus Icon Pure CSS

Tutorial Cara Membuat Menu Navigation Bar Multi Dropdown Responsive With Icon Font Awesome

Memasang Icon Di Menu Navigation Bar Blogger, Pada kesempatan kali ini saya akan memberikan tutorial menambahkan icon atau gambar bisa juga logo ke dalam menu navigasi blog.

Sebelumnya saya juga sudah pernah posting tutorial membuat menu navigasi dengan icon, tapi pada postingan sebelumnya saya menggunakan image untuk dijadikan icon menu tersebut dan banyak yang bingung bagaimana cara mengganti, menghosting, mencari link imagenya dlll.

Nah pada postingan ini saya mengganti icon image dengan menggunakan icon FontAwesome yang cukup mudah untuk kalian ganti sesuai dengan icon yang sudah di sediakan, tinggal pilih copy llau paste...

Bagi yang tidak cocok dengan tampial menu navigation ini, kalian bisa mencari menu navigation yang lain di blog mas tamvan ini, karena saya udah sering posting artikel tentang menu navigation bar yang responsive / mobile friendly. Salah satunya bisa kalian liat di link berikut..

Tutorial Blogger Lainnya :

• Memunculkan Menu Ketika Blog Di Klik Kanan (Manipulasi Klik Kanan)

• Membuat Menu Bar Drop Down Responsive Dengan Mudah

• 4 Membuat Menu Navigation Bar Dropdown Responsive Tanpa Edit HTML

Sekarang kita lanjut ke tutorialnya..

Memasang Menu Navigation Plus Icon FontAwesome

• Login terlebih dahulu ke akun blogger kalian

• Kalo Udah login klik menu Template → Edit HTML

• Setelah Masuk Edit HTML, Kalian cari kode </head>

• Selanjutnya masukan CSS dibawah ini tepat di atasnya

<style type='text/css'>
/*Menu Navigation Plus Icon*/
nav#menu_mastamvan .toggle,[id^=drop]{display:none}
nav#menu_mastamvan{margin:0;padding:0;background-color:#2979ff}
nav#menu_mastamvan:after{content:"";display:table;clear:both}
nav#menu_mastamvan ul{float:right;padding:0;margin:0;list-style:none;position:relative;width:100%}
nav#menu_mastamvan ul li{margin:0;display:inline-block;float:left;background-color:#2979ff}
nav#menu_mastamvan a{display:block;padding:0 20px;color:#FFF;font-size:20px;line-height:60px;text-decoration:none}
nav#menu_mastamvan ul li ul li:hover{background:#000000}
nav#menu_mastamvan a:hover{background-color:#000000}
nav#menu_mastamvan ul ul{display:none;position:absolute;top:60px}
nav#menu_mastamvan ul li:hover > ul{display:inherit}
nav#menu_mastamvan ul ul li{width:170px;float:none;display:list-item;position:relative}
nav#menu_mastamvan ul ul ul li{position:relative;top:-60px;left:170px}
nav#menu_mastamvan li > a:after{content:"\f0d7";font-family:FontAwesome;padding:0 0 0 3px;float:right}
nav#menu_mastamvan li > a:only-child:after{content:''}
/* Media Queries*/
@media all and (max-width:768px){nav#menu_mastamvan{margin:0}nav#menu_mastamvan .toggle + a,nav#menu_mastamvan .menu{display:none}nav#menu_mastamvan .toggle{display:block;background-color:#254441;padding:0 20px;color:#FFF;font-size:20px;line-height:60px;text-decoration:none;border:none;cursor:pointer}nav#menu_mastamvan label.toggle i{float:right;line-height:60px}nav#menu_mastamvan .toggle:hover{background-color:#000000}nav#menu_mastamvan [id^=drop]:checked + ul{display:block}nav#menu_mastamvan ul li{display:block;width:100%}nav#menu_mastamvan ul ul .toggle,nav#menu_mastamvan ul ul a{padding:0 40px}nav#menu_mastamvan ul ul ul a{padding:0 80px}nav#menu_mastamvan a:hover,nav#menu_mastamvan ul ul ul a{background-color:#000000}nav#menu_mastamvan ul li ul li .toggle,nav#menu_mastamvan ul ul a{background-color:#212121}nav#menu_mastamvan ul ul{float:none;position:static;color:#ffffff}nav#menu_mastamvan ul ul li:hover > ul,nav#menu_mastamvan ul li:hover > ul{display:none}nav#menu_mastamvan ul ul li{display:block;width:100%}nav#menu_mastamvan ul ul ul li{position:static}}
@media all and (max-width:330px){nav#menu_mastamvan ul li{display:block;width:100%}}
</style>



Khusus buat kalian yang di templatenya belum ada Font Awesome, Silahkan Masukan Script ini di atas kode </head>

<link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel = "stylesheet" />

Kalo ga ada fontawesomenya nanti iconnya g bakalan tampil!

• Save Template

• Setelah memasang kode cssnya, sekarang kita tinggal menyimpan kode HTML menu navigationnya

• Kalian bisa pasang di atas atau di bawah header, footer dll

• di tutorial lini kita coba pasang lewat tataletak aja biar mudah.

• Kalian masuk ke Tataletak → Tambahkan Widget, Cari HTML/Javascript (Lihat Gambar)

• Klik HTML/Javascript maka akan muncul popup seperti berikut

• Lalu kalian copy kode Menu Navigation dibawah ini dan masukan ke dalamnya

<nav id='menu_mastamvan'>
  <label for="drop" class="toggle">Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
    <li><a href="https://mastamvan.blogspot.co.id/p/sitemap.html"><i class="fa fa-html5" aria-hidden="true"></i> HTML5</a></li>
    <li> 
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">Dropdown <i class="fa fa-caret-down" aria-hidden="true"></i></label>
      <a href="#">Dropdown</a>
      <input type="checkbox" id="drop-1"/>
      <ul>
        <li><a href="#">Dropdown 1</a></li>
        <li><a href="#">Dropdown 2</a></li>
        <li><a href="#">Dropdown 3</a></li>
      </ul>
    </li>
    <li> 
      
      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Dropdown <i class="fa fa-caret-down" aria-hidden="true"></i></label>
      <a href="#">Dropdown</a>
      <input type="checkbox" id="drop-2"/>
      <ul>
        <li><a href="#">Dropdown 1</a></li>
        <li><a href="#">Dropdown 2</a></li>
        <li> 
          
          <!-- Second Tier Drop Down -->
          <label for="drop-3" class="toggle">Works <i class="fa fa-caret-down" aria-hidden="true"></i></label>
          <a href="#">Works</a>
          <input type="checkbox" id="drop-3"/>
          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-android" aria-hidden="true"></i> Android</a></li>
  </ul>
</nav>



Yang perlu kalian ganti / sesuaikan..
Tanda # (pagar) Ganti dengan link tujuan.
Kode yang di bungkus dengan tag <i sampai </i>, Contoh <i class="fa fa-home" aria-hidden="true"></i>. Dengan Icon yang Kalian Mau
Tulisan Home, HTML, Dropdown. Sesuaikan Dengan Judul Menu Kalian

• Kalo Sudah Tinggal Save

• Jika kalian ingin mengganti icon menunya, ikuti langkah demi langkah dibawah ini ↓

Memasang Icon Di Samping Text Menu Navigation

Di sini kita akan mengganti / merubah icon di menu navigation bar tadi dengan menggunakan icon font awesome...

• Langkah pertama, silahkan kunjungi link berikut untuk mencari icon yang cocok untuk di pasang pada menu Font Awesome 4.7.0

• Setelah masuk ke situnya, kalian akan melihat banyak icon-icon di situ...

• Untuk mendapatkan kodenya, klik iconnya dan nanti akan di arahkan ke halaman lain

• Selanjutnya kalian tinggal copy kodenya dan masukan ke samping judul menu kalian

• Jangan lupa kasih spasi agar nanti ada jarak antara menu dan iconnya

• Kalo sudah tinggal save n done

• Salam tamvan

Cukup sekian dan terimakasih, semoga artikel tentang Tutorial Membuat Menu Navigation Bar Dropdown Responsive Plus Icon With Font Awesome ini bermanfaat :)
Jika kalian bingung dengan tutorialnya, silahkan bertanya di kolom komentar