Membuat Sajian Kafe 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 menawarkan tutorial menambahkan icon atau gambar dapat juga logo ke dalam menu navigasi blog.

Sebelumnya saya juga sudah pernah posting tutorial menciptakan sajian navigasi dengan icon, tapi pada postingan sebelumnya saya memakai image untuk dijadikan icon sajian tersebut dan banyak yang resah bagaimana cara mengganti, menghosting, mencari link imagenya dlll.

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

Bagi yang tidak cocok dengan tampial sajian navigation ini, kalian dapat mencari sajian navigation yang lain di blog mas tamvan ini, sebab saya udah sering posting artikel perihal sajian navigation kafe yang responsive / mobile friendly. Salah satunya dapat 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 sajian Template → Edit HTML

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

• Selanjutnya masukan CSS dibawah ini sempurna 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 instruksi </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 instruksi cssnya, kini kita tinggal menyimpan instruksi HTML sajian navigationnya

• Kalian dapat 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 menyerupai berikut

• Lalu kalian copy instruksi 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 hingga </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 sajian navigation kafe tadi dengan memakai icon font awesome...

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

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

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

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

• Jangan lupa kasih spasi supaya nanti ada jarak antara sajian dan iconnya

• Kalo sudah tinggal save n done

• Salam tamvan

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