Cara Membuat Menu Dropdown Blogger yang Responsive

Cara Membuat Menu Dropdown Blogger yang Responsive

Cara Membuat Menu Dropdown Blogger yang Responsive

Tak bisa dimungkiri bahwa navigasi blog cukup berpengaruh saat Anda mengajukan blog untuk menjadi publisher Google AdSense. Tujuannya tentu agar memudahkan pengunjung untuk menelusuri blog Anda. Nah, salah satu tipe navigasi terfavorit adalah menu dropdown Blogger yang responsive.

Tipe atau bentuk navigasi blog sebenarnya ada berbagai macam. Ada blog yang menggunakan menu vertikal di sebelah kiri halaman, ada pula menu yang diletakkan secara horizontal di header atau bagian atas halaman. Tetapi kebanyakan pengelola blog lebih menyukai tipe menu navigasi yang horizontal dan memiliki submenu atau dropdown.

membuat menu dropdown blogger

Menu dropdown ini dinilai lebih jelas dan mudah dipahami oleh pengunjung blog, ditambah lagi menu tersebut responsive. Jika demikian, sepertinya tidak ada alasan lagi untuk terkena penolakan AdSense karena masalah “Navigasi Situs Sulit”. Bagaimana cara membuatnya? Berikut penjelasan selengkapnya.

Membuat Menu Navigasi Dropdown Multilevel Responsive

Oke, pada penjelasan cara membuat menu dropdown blogger yang responsive ini kita akan gunakan jenis font awesome, sehingga akan muncul ikon di samping teks. Caranya tambahkan kode di bawah ini sebelum kode <b:skin>.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

membuat menu dropdown blogger

Tetapi jika tidak ingin ada ikon di sebelah teks, maka tidak perlu tambahkan kode tersebut. Oke, mari kita mulai langkah-langkahnya.

#1. Sebelum dimulai, sebaiknya Anda backup terlebih dahulu template blog Anda untuk berjaga-jaga. Sebab, Anda harus menghapus kode CSS menu navigasi bawaan blog Anda. Ini bertujuan supaya tampilan menu tidak berantakan karena bentrok antara kode CSS lama dan CSS baru.

Kode menu dropdown ini dikembangkan oleh blog caramanual.com. Untuk demo menunya bisa Anda lihat di sini.

#2. Buka dasbor blog Anda > masuk ke menu “Tema” > klik “Edit HTML”. Cari kode ]]></b:skin> atau </style> lalu tambahkan CSS di bawah ini tepat di atasnya.

nav {
    display: block;
    background: #374147;
}

.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: #ff3c41;
}
.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    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: #ff3c41;
    color: #fff;
}
.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}
.menu ul ul {
    left: 149px;
    top: 0px;
    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: #ff3c41;
}
@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }
    .menu ul {
        top: 37px;
    }
    .menu li a {
        font-size: 12px;
    }
    a.homer {
        background: #374147;
    }
}
@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: #ff3c41;
        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;
    }
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}

#3. Langkah berikutnya salin dan tempel kode HTML menu navigasi responsive ini. Untuk letaknya bisa Anda sesuaikan dengan template blog Anda, tetapi biasanya ditempatkan sebelum kode </header>.

<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>

#4. Cari lagi kode </body> kemudian tambahkan kode jQuery berikut ini di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
$(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>

#5. Terakhir, simpan template lalu lihat hasilnya.
Jika menu navigasi Anda jadi terlihat berantakan, coba perhatikan lagi langkah nomor #1, kemudian coba lagi dari awal sampai berhasil.

membuat menu dropdown blogger


Demikian tutorial cara membuat menu dropdown Blogger yang responsive. Semoga bermanfaat.
Buka Komentar