Cara Membuat Menu Multi Dropdown Responsive Dan Seo Friendly

Cara Membuat Menu Dropdown, Responsive Dan Seo Friendly, Menu Dropdown maupun menu navigasi memiliki fungsi yang sama, yaitu lebih memudahkan pengunjung mencari semua isi artikel Anda mulai dari yang baru saja Anda Publikasikan hingga Artikel yang telah lama Anda posting agar tidak hanya tersimpan di arsip saja. Namun dengan menggunakan menu navigasi dropdown dapat menambah jumlah klik maupun visitor, karena Anda dapat menyajikan semua isi artikel dalam menu dropdown tersebut dan dengan adanya menu multi dropdown ini lebih memaksimalkan penggunaan menu navigasi Anda.

Menu Multi Dropdown kali ini yang akan saya bagikan, telah di lengkapi dengan fitur responsive yang disesuaikan dengan kebutuhan teknologi saat ini, dapat tampil disemua perangkat seperti hp, laptop, tablet maupun smartphone lainnya. Menu navigasi dropdown ini diambil dari Menu Dropdown Masyadi, kurang lebih contohnya seperti di bawah ini :

Berikut Adalah langkah - langkah membuat menu multi dropdown responsive dan seo friendly, yaitu :

1. Masuk ke Draf blogger
2. klik Template lalu Edit Html
3. Akan muncul kode - kode Template Anda, lalu cari kode ]]</b:skin>, lalu letakan kode dibawah ini tepat diatas ]]</b:skin>

 nav { display:block; margin-top:100px; background:#374147; border-bottom:4px solid #07ACEC; }.menu { display:block; }.menu li { display:inline-block; position:relative; z-index:100; }.menu li:first-child { margin-left:0; }.menu li a { font-weight:600; text-decoration:none; padding:20px 15px; display:block; color:#fff; transition:all 0.2s ease-in-out 0s; }.menu li a:hover,.menu li:hover>a { color:#fff; background:#07ACEC; }.menu ul { visibility:hidden; opacity:0; margin:0; padding:0; width:150px; position:absolute; left:0; background:#fff; z-index:99; transform:translate(0,20px); transition:all 0.2s ease-out; }.menu ul:after { bottom:100%; left:20%; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; border-color:rgba(255,255,255,0); border-bottom-color:#fff; border-width:6px; margin-left:-6px; }.menu ul li { display:block; float:none; background:none; margin:0; padding:0; }.menu ul li a { font-size:12px; font-weight:normal; display:block; color:#797979; background:#fff; }.menu ul li a:hover,.menu ul li:hover>a { background:#07ACEC; color:#fff; }.menu li:hover>ul { visibility:visible; opacity:1; transform:translate(0,0); }.menu ul ul { left:149px; top:0; visibility:hidden; opacity:0; transform:translate(20px,20px); transition:all 0.2s ease-out; }.menu ul ul:after { left:-6px; top:10%; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; border-color:rgba(255,255,255,0); border-right-color:#fff; border-width:6px; margin-top:-6px; }.menu li>ul ul:hover { visibility:visible; opacity:1; transform:translate(0,0); }.responsive-menu { display:none; width:100%; padding:20px 15px; background:#374147; color:#fff; text-transform:uppercase; font-weight:600; }.responsive-menu:hover { background:#374147; color:#fff; text-decoration:none; }a.homer { background:#07ACEC; }@media (min-width:768px) and (max-width:979px) {    .mainWrap { width:768px; } .menu ul { top:37px; } .menu li a { font-size:12px; } a.homer { background:#07ACEC; }}@media (max-width:767px) {    .mainWrap { width:auto; padding:50px 20px; } .menu { display:none; } .responsive-menu { display:block; margin-top:100px; } nav { margin:0; background:none; } .menu li { display:block; margin:0; } .menu li a { background:#fff; color:#797979; } .menu li a:hover,.menu li:hover>a { background:#07ACEC; color:#fff; } .menu ul { visibility:hidden; opacity:0; top:0; left:0; width:100%; transform:initial; } .menu li:hover>ul { visibility:visible; opacity:1; position:relative; transform:initial; } .menu ul ul { left:0; transform:initial; } .menu li>ul ul:hover { transform:initial; }} 

Langkah selanjutnya letakan kode dibawah ini tepat diatas </head> atau </body>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/><script type="text/javascript">$(document).ready(function(){ var touch  = $('#resp-menu'); var menu  = $('.menu'); $(touch).on('click', function(e) {  e.preventDefault();  menu.slideToggle(); }); $(window).resize(function(){  var w = $(window).width();  if(w > 767 && menu.is(':hidden')) {   menu.removeAttr('style');  } });});</script> 

Dan yang terakhir Anda cari kode <div class='main-outer'> letakkan kode dibawah ini diatasnya, ganti menu Anda yang lama dengan kode dibawah ini.

 <nav><a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>      <ul class="menu">   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>   <ul class="sub-menu">   <li><a href="#">Sub-Menu 1</a></li>   <li><a href="#">Sub-Menu 2</a></li>   <li><a href="#">Sub-Menu 3</a></li>   <li><a href="#">Sub-Menu 4</a></li>   <li><a href="#">Sub-Menu 5</a></li>    </ul>   </li>  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>  <ul class="sub-menu">   <li><a href="#">Sub-Menu 1</a></li>   <li><a href="#">Sub-Menu 2</a>    <ul>    <li><a href="#">Sub Sub-Menu 1</a></li>    <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li>    <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li>    </ul>   </li>     <li><a href="#">Sub-Menu 3</a>    <ul>    <li><a href="#">Sub Sub-Menu 1</a></li>    <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li>    <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li>    </ul>   </li>   </ul>  </li>  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>  <ul class="sub-menu">   <li><a href="#">Sub-Menu 1</a></li>   <li><a href="#">Sub-Menu 2</a>    <ul>    <li><a href="#">Sub Sub-Menu 1</a></li>    <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li>    <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li>    </ul>   </li>     <li><a href="#">Sub-Menu 3</a>    <ul>    <li><a href="#">Sub Sub-Menu 1</a></li>    <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li>    <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li>    </ul>   </li>   </ul>  </li>  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>  </ul>  </nav> 

Ganti tanda # dengan Url kategori Anda, lalu simpan dan sebelum menyimpan jangan lupa lihat pratinjau terlebih dahulu untuk memastikan template Anda tidak rusak, jika template Anda rusak klik aja Kembalikan Perubahan maka Template Anda akan kembali seperti semula, sekarang menu navigasi multi dropdown telah ada pada template Anda dan telah dilengkapi dengan fitur responsive. Selamat mencoba.

Baca Juga : Cara Menambahkan Menu Navigasi Tanpa Edit Html