Cara Membuat Mega Menu Responsive Keren di Blogspot

Cara Membuat Mega Menu Responsive di Blogspot

Diposting pada

Blog Mang Otep | Cara Membuat Mega Menu Responsive Keren di Blogspot – Memasang Mega Menu Dropdown secara gampang dan sederhana – fungsi mega menu sebenarnya hampir sama dengan menu pada umumnya di blogger.

Akan tetapi di Mega Menu di tambahkan beberapa fitur seperti feeds thumbnail, contact form, dan lain lain.

Mega menu navigasi ini cocok untuk kalian yang mempunyai blog atau website dengan tema atau kategori bisnis dan e-commerce dengan profil produk yang lumayan banyak.

Langsung saja dibawah ini beberapa kode yang harus anda masukkan kedalam template blog anda, silahkan copy.

Cara Membuat Mega Menu Responsive Keren di Blogspot

1. Masuk blogger.com

2. Pindah ke menu Tema >> Edit Tema

3. Selanjutnya, Cari kode </style> atau kode ]]></b:skin>, Letakkan kode di bawah ini tepat diatasnya :

/* Mega Menu Blogger publish by Blog Mang Otep */
body {
  background: #ddd
}
@import url(https://fonts.googleapis.com/css?family=Oswald);
nav {
  height: 60px;
  position: relative;
  background: #222;
  font-family: 'fontawesome', 'oswald', sans-serif;
}
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
nav a {
  text-decoration: none;
}
nav>ul>li {
  position: relative;
  float: left;
}
nav>ul>li>a {
  position: relative;
  line-height: 60px;
  padding: 0 20px;
  color: #fff;
  display: block;
  transition: all .3s;
}
nav>ul>li>a:hover {
  color: #f6d039;
}
nav>ul>li.contact-menu>a:after,
nav>ul>li.mega-menu>a:after,
nav>ul>li.blogger-pos>a:after,
nav>ul>li.drop-down>a:after {content: ' 0d7';
  position: absolute;
  top: 0;
  right: 0;
}
nav>ul>li.mega-menu {
  position: static;
}
nav>ul>li.mega-menu .mega-menu-inner {
  position: absolute;
  opacity: 0;
  width: 100%;
  overflow: auto;
  top: -9999px;
  left: -9999px;
  background: #f9f9f9;
  visibility: hidden;
  border-top: 3px solid #f6d039;
  transition: opacity .3s;
}
nav>ul>li.mega-menu .mega-menu-inner ul {
  width: 23%;
  float: left;
  margin: 20px 1%;
}
nav>ul>li.mega-menu .mega-menu-inner ul li a {
  display: block;
  padding: 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #999;
  color: #222;
}
nav>ul>li.mega-menu .mega-menu-inner ul h3 {
  color: #8181ee;
  padding: 0;
  margin: 20px 10px;
}
nav>ul>li.mega-menu:hover .mega-menu-inner {
  opacity: 1;
  left: 0;
  top: 100%;
  visibility: visible;
}
nav>ul>li.blogger-pos {
  position: static;
}
nav>ul>li.blogger-pos:hover .nav-item {
  opacity: 1;
  top: 100%;
  left: 0;
  visibility: visible;
}
nav>ul>li.blogger-pos .nav-item {
  position: absolute;
  width: 100%;
  overflow: auto;
  padding: 40px 0;
  top: -9999px;
  opacity: 0;
  left: -9999px;
  background: #f9f9f9;
  visibility: hidden;
  border-top: 3px solid #f6d039;
  transition: opacity .3s;
}
nav>ul>li.blogger-pos .nav-item .item {
  float: left;
  width: calc(23.1% - 100px);
  background: #ddd;
  margin: 0 10px;
  padding: 10px;
}
nav>ul>li.blogger-pos .nav-item .item img {
  width: 100%;
  height: 180px;
}
nav>ul>li.blogger-pos .nav-item .item h3 {
  font-size: 15px;
}
nav>ul>li.blogger-pos .nav-item .item a {
  color: #222;
}
nav>ul>li.drop-down>ul {
  position: absolute;
  border-top: 3px solid #f6d039;
  top: -9999px;
  visibility: hidden;
  opacity: 0;
  left: -99999px;
  width: 170px;
  background: #f9f9f9;
  transition: opacity .3s;
}
nav>ul>li.drop-down>ul:after,
nav>ul>li.drop-down>ul:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
nav>ul>li.drop-down>ul:after {
  border-color: rgba(236, 240, 241, 0);
  border-bottom-color: #f6d039;
  border-width: 5px;
  margin-left: -5px;
}
nav>ul>li.drop-down>ul:before {
  border-color: rgba(231, 76, 60, 0);
  border-bottom-color: #f6d039;
  border-width: 9px;
  margin-left: -9px;
}
nav>ul>li.drop-down:hover>ul {
  opacity: 1;
  top: 100%;
  left: 0;
  visibility: visible;
}
nav>ul>li.drop-down>ul a {
  padding: 10px;
  display: block;
  border-bottom: 1px solid #ddd;
  color: #222;
  font: 400 15px 'oswald', 'fontawesome', sans-serif;
  transition: all .3s;
}
nav>ul>li.drop-down>ul>li.sub-menu:after {
  content: ' 101';
  position: Absolute;
  right: 10px;
  top: 50%;
  margin-top: -10px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  display: block;
}
nav>ul>li.drop-down>ul>li.sub-menu {
  position: relative;
}
nav>ul>li.drop-down>ul>li.sub-menu>ul {
  left: 90%;
  width: 150px;
  opacity: 0;
  background: #f9f9f9;
  top: -99999px;
  visibility: hidden;
  border-left: 3px solid #f6d039;
  position: Absolute;
  transition: opacity .3s;
}
nav>ul>li.drop-down>ul>li.sub-menu:hover>ul {
  opacity: 1;
  left: 100%;
  top: 0;
  visibility: visible;
}
.arrow_box:after,
nav>ul>li.drop-down>ul>li.sub-menu>ul:before {
  right: 100%;
  top: 15px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
nav>ul>li.drop-down>ul>li.sub-menu>ul:after {
  border-color: rgba(236, 240, 241, 0);
  border-right-color: #f6d039;
  border-width: 5px;
  margin-top: -5px;
}
nav>ul>li.drop-down>ul>li.sub-menu>ul:before {
  border-color: rgba(231, 76, 60, 0);
  border-right-color: #f6d039;
  border-width: 9px;
  margin-top: -9px;
}
nav>ul>li.contact-menu {
  position: static;
}
nav>ul>li.contact-menu .contact-menu-inner {
  position: Absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  border-top: 3px solid #f6d039;
  overflow: auto;
  background: #f9f9f9;
  transition: opacity .3s;
}
nav>ul>li.contact-menu:hover .contact-menu-inner {
  opacity: 1;
  left: 0;
  top: 100%;
  visibility: visible;
}
nav>ul>li.contact-menu .contact-menu-inner form {
  float: left;
  width: 46%;
  padding: 20px 0;
  margin: 0 2%;
}
nav>ul>li.contact-menu .contact-menu-inner form span {
  display: block;
  font: 400 14px 'oswald', 'fontawesome', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
nav>ul>li.contact-menu .contact-menu-inner form input,
nav>ul>li.contact-menu .contact-menu-inner form textarea {
  display: block;
  width: 50%;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  outline: none;
  color: #999;
  font-family: 'oswald', sans-serif;
  margin: 10px 0;
}
nav>ul>li.contact-menu .contact-menu-inner .misc-contact {
  float: right;
  width: 50%;
  padding: 20px 0;
}
nav>ul>li.contact-menu .contact-menu-inner .misc-contact span,
nav>ul>li.contact-menu .contact-menu-inner .misc-contact a {
  color: #e74c3c;
}

Untuk desain tahapan selanjutnya kalian  bisa memilih warna, bentuk font awesome dan menambahkan menu yang akan kalian pasang pada blog atau website anda masing – masing.

4. Masukkan kode HTML dibawah ini pada kode menu sebelumnnya, atau bisa juga ditempatkan pada sebelum kode </head>

<link rel="stylesheet" href='https://www.mangotep.com?e2005165a7=VFRyRTQwQmN2QmgwUENJT1FTSUdZSHdsVFVrTDNwZ1JZMDloc2pyMTJ4K29aWmxWanV5S3BubTFwaVY4QVRJc1Qzcjk2MlVORGN6dEZtMlRIUUFnRmFIRUN6OStZeGpUTUcvZFlDc3pscWsxb05EQ2todks5NE9mSmxERndqOHVuYW9yUFlMMEFLc3hBVEg3VEhQbmVhMkNwS1gvdUFsaFhST0pTb25kdTNBPQ==' rel='nofollow'>

<nav>
  <ul>
    <li><a href='#'>&#xf015; Home</a></li>
    <li class='mega-menu'><a href='#'>&#xf03a; Categories</a>
      <div class='mega-menu-inner'>
        <ul>
          <h3>Heading 1</h3>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
        </ul>

        <ul>
          <h3>Heading 2</h3>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
        </ul>

        <ul>
          <h3>Heading 3</h3>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
        </ul>

        <ul>
          <h3>Heading 4</h3>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
          <li><a href='#'>Sublink</a></li>
        </ul>
      </div>
    </li>

    <li class='blogger-pos' data-label='All'><a href='#'>&#xf1ea; Coding</a></li>
    <li class='drop-down'><a href='#'>&#xf129; About Us</a>
      <ul>
        <li><a href='#'>&#xf1fe; Profile</a></li>
        <li><a href='#'>&#xf0e6; Community</a></li>
        <li class='sub-menu'><a href='#'>&#xf0c0; Team</a>
          <ul>
            <li><a href='#'>&#xf1fc; Designers</a></li>
            <li><a href='#'>&#xf121; Developers</a></li>
            <li><a href='#'>&#xf201; Marketers</a></li>
          </ul>
        </li>
      </ul>
    </li>

    <li class='contact-menu'><a href='#'>&#xf0e0; Contact Us</a>
      <div class='contact-menu-inner'>
        <form>
          <span>Name</span>
          <input type='text' />
          <span>Email</span>
          <input type='email' />
          <span>Description</span>
          <textarea></textarea>
        </form>
        <div class='misc-contact'>
          <address>
        Visit us at:<br>
          Blog Mang Otep,<br>
          https://www.mangotep.com/<br>
          Jakarta - Indonesia.
        </address>
          <span class='email'><a href='https://www.mangotep.com?e2005165a7=VFRyRTQwQmN2QmgwUENJT1FTSUdZS25meEt1UFRrT2REak5WZmZ2NWxGZmlrYmZCUmh5YzRWMUdFeGU4Q2o4WElBQ3pRMktwVEFHdjl5WEo3TlkzL3c9PQ==' rel='nofollow'>yosepsipil@gmail.com</a></span> /
          <span class='number'> Rahasia</span>
        </div>
      </div>
    </li>
  </ul>
</nav>

5. Kemudian masukkan kode Javascript dibawah ini diatas kode </body>

// Konsep Mega Menu Untuk Blogger
// By Arlina Design , Publish By Blog Mang Otep

var q = $('li.blogger-pos');
q.each(function() {
  var e = $(this),
    indexnumber = Math.random(),
    domain = 'https://www.mangotep.com/',
    f = e.attr('data-label'),
    g = domain + '/feeds/posts/summary/-/' + f + '?max-results=5&alt=json-in-script';
  e.append('<div class="nav-item"></div>');
  $.ajax({
    type: 'GET',
    url: g,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
      for (var i = 0; i < json.feed.entry.length; i++) {
        var h = json.feed.entry[i];
        for (var j = 0; j < h.link.length; j++) {
          if (h.link[j].rel == 'alternate') {
           var l = h.link[j].href;
            break;
          }
        }
        try {
          var k = h.media$thumbnail.url.replace("s72-c", "s250-no");
        } catch (m) {
          var k = 'https://4.bp.blogspot.com/-44M8yK5CHp8/ViTaiQDurbI/AAAAAAAALnU/v7jzzQsbkCY/s1600/No%2Bimage.png';
        }
        var z = h.title.$t;
        var nnitem = "<div class='item'><img src='" + k + "'/><h3><a href='https://www.mangotep.com?e2005165a7=VFRyRTQwQmN2QmgwUENJT1FTSUdZR0ZzdTRxM04xWGJwb2J1TFMrSzQ0bjU0QUJ6dVc3T3BGMzdKT1dQeWh5Ug==' rel='nofollow'>" + z + "</a></h3></div>";
        e.find('.nav-item').append(nnitem);
      }
    }
  });
});

Dengan Mega Menu ini halaman yang tidak bisa ditempatkan pada home blog anda bisa anda masukkan kedalam navigasi menu bagian atas, cukup simpel dan tidak memakan ruang yang begitu besar.

Demikianlah Blog Mang Otep tentang konsep artikel Cara Membuat Mega Menu Responsive Keren di Blogspot, semoga bermanfaat untuk anda. Jika menyukai artikel ini silahkan klik like, share, and subscribe untuk mendapatkan artikel terbaru langsung dari email anda.

Terima kasih. Salam blogger.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *