Membuat mega menu blogspot - Untuk artikel ngeblog kali ini saya akan membagikan cara membuat mega menu pada blog, kegunaan mega menu sama halnya dengan menu horizontal yaitu sebagai navigasi untuk mempermudah pengunjung mengakses halaman halaman penting, namun pada mega menu ada tambahan yaitu mega menu mampu menampillkan feed artikel terbaru (recent post) dalam menu dropdown yang menarik lagi menu tersebut diselipi gambar, keren lah.


Tips ini saya temukan pada blog yang katanya mengambil dari sumber arlinadesign.com, jadi saya langsung ke sumber arlina.com saja sembari menulis artikel ini, sebelumnya saya akan membagikan tips sederhana buat kamu yang ingin membuat blog, carilah refrensi yang valid saat membuat blog, jangan percaya dengan blog yang sepi pengunjung akan tetapi berani memberikan tips SEO, dan jangan percaya tips memperbagus tampilan blog akan tetapi tampilan blognya sendiri kacau balau

Cara Membuat mega menu blogspot
Sebelum memulai sipakan mental kamu dengan baik, karena untuk tutorial kali ini kita akan berurusan dengan kode CSS, kode Txt / Java Script, kode HTML. Letak kesulitan Membuat mega menu blogspot adalah penempatan menu, karena masing masing thempalte mempunyai ID CLASS berbeda beda namun dengan fungsi yang sama. Baiklah langsung saja kita ke tutorial

Masuk ke blogger.com, log in dengan akun google anda, setelah berhasil masuk keberanda blogger silahkan pilih blog yang akan anda kasih mega menu

Kemudin pilih Thema, pilih edit HTML, dijendela ini akan ditampakan banyak sekali kode kode, ada CSS, XML/HTML, dan SCRIPT

Untuk mempermudah melakukan pencarian kode yang diinginkan gunakan kolom pencarian dengan menekan tombol CTRL+F

Biasanya untuk modifikasi themplate blog, kode yang sering diutak atik adalah kode CSS, nah kalau ada efek slide glow dan animasi , biasanya kode yang ditambahkan adalah Java Script, sedangkan untuk HTML merupakan objek yang dimodifikasi alias modifikasi CSS dan JAVA SCRIPT semata mmata untuk menampilkan HTML yang keren

Silahkan copy kode CSS dibawah ini dan tempatkan diarea  <style> Tempatkan kodenya disini </style>


/* Mega Menu Blogger */
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: '\f0d7';
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: '\f101';
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;
}

Silahkan sesuaikan ukuran blog anda, sesuaikan juga warna menu dan bordernya, warna menu kode CSS diatas adalah hitam , kode cssnya ini background: #222 . Perlu diperhatikan juga ID CLASS-nya jika pada themplate blog sebelumnya sudah ada ID nav, karena kalau double id namun fungsinya berbeda bisa bisa tampilan blog malah jadi berantakan, hal ini biasanya tidak diperhatikan oleh blogger yang buru buru main copy paste

Sekarang cari kode </body>, kalau sudah ketemu silahkan copy kode dibawah ini lalu letakan diatas kode  </body>

<script type='text/javascript'>
//<![CDATA[
// Konsep Mega Menu Untuk Blogger
// By Arlina Design
// Twitter: @ArlinaDesign
var q = $('li.blogger-pos');
q.each(function() {
  var e = $(this),
    indexnumber = Math.random(),
    domain = 'http://asis10.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 = 'http://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='" + l + "'>" + z + "</a></h3></div>";
        e.find('.nav-item').append(nnitem);
      }
    }
  });
});
//]]>
</script>

Perhatikan kode yang dicetak tebal, silahkan ganti url asis10.com dengan url blog kamu

Untuk langkah berikutnya merupakan ujian bagi kecerdasan anda, karena kode themplate itu mempunyai Id class yang berbeda namun fungsinya sama, jika kamu sudah paham apa maksudnya silahkan copy kode HTML dibawah ini dan letakan sesuai selera. Biasanya untuk urusan menu letaknya dibawah Head atau Header

<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='MACRO'><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>
          Galaksi Bima Sakti,<br>
          Bintang Matahari,<br>
          Planet Bumi.
        </address>
          <span class='email'><a href='mailto:arlinadesign@hotmail.com'>arlinadesign@hotmail.com</a></span> /
          <span class='number'>+00-000-123456</span>
        </div>
      </div>
    </li>
  </ul>
</nav>

Perhatikan kode yang dicetak tebal, silahkan ganti url MACRO dengan label yang ada pada blog kamu

Baca juga postingan pertama saya tentang Popular post disini. Silahkan simpan dan lihat hasilnya sama dengan menu yang dipakai blog ini, atau lihat demonya dibawah ini


Demikianlah cara Membuat mega menu blogspot, semoga dapat dipahami diamalkan dan menambah daya tarik blog kamu, selamat libur panjang
1 comment
Andrie Kristianto

demonya dengan tumbnail diatas tidak sama ya

Reply