Membuat Hidangan Kafe Dropdown Responsive Plus Icon Pure Css

Membuat Hidangan Kafe Dropdown Responsive Plus Icon Pure Css

Menu Navigation Bar Multi Dropdown With 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 memperlihatkan 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 galau 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 wacana sajian navigation kafe yang responsive / mobile friendly. Salah satunya dapat kalian liat di link berikut..



Sekarang kita lanjut ke tutorialnya..

Memasang Menu Navigation Plus Icon FontAwesome

  • Login terlebih dahulu ke akun blogger kalian
  • Kalo Udah login klik sajian TemplateEdit HTML
  • Setelah Masuk Edit HTML, Kalian cari aba-aba </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 aba-aba </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 aba-aba cssnya, kini kita tinggal menyimpan aba-aba 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 TataletakTambahkan Widget, Cari HTML/Javascript (Lihat Gambar)
  • Tataletak Add Gadget / Widget Blogger
  • Klik HTML/Javascript maka akan muncul popup menyerupai berikut
  • Masukan Scrippt Di HTML / Javascript
  • Lalu kalian copy aba-aba 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 biar nanti ada jarak antara sajian dan iconnya
  • Kalo sudah tinggal save n done
  • Salam tamvan

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

Sumber https://mastamvan.blogspot.com/

Baca juga:

Blogger
Disqus
Pilih Sistem Komentar

No comments

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.