Cara membuat Menu Navigasi Dropdown label terkait

Kosim22.com akan membahas bagaimana Cara membuat Menu Navigasi Dropdown label terkait disini saya menggunakan Mega menu navigation with images or thumbnails for Blogger. Kamu bisa mempercantik tampilan blog kamu dengan memasang navigasi seperti ini. Ajax menu navigasi ini di rancang khusus untuk blog Blogger. Menu dropdown akan berkesan lebih mewah seperti blog-blog berita di luar sana.

Gambar akan di load saat kursor mouse diarahkan pada navigasi menu ini. Kamu bisa menaruh label-label blog kamu dan otomatis akan di load, jadi lebih mudah karena kamu tidak perlu memasukan gambar satu-persatu dalam menu ini.

Fasilitas

• Mega Menu with Images or Thumbnails for Blogger

• Cross-browser Compatibility

• Automatic Sub-Menu Display

• Menu Styling

Sebelum kamu memulai tutorial dibawah ini sebaiknya backup dulu  tamplate kamu agar bisa di kembalikan dengan mudah jika terjadi kesalahan. Jika sudah ada menu di blog kamu, hapus saja menunya dan ganti dengan yang baru. Oh iya kekurangan menu ini adalah belum responsive, tapi kamu bisa mengaturnya responsive nanti.

Kita mulai dengan cara dibawah ini

1. Masukan kode CSS dibawah ini diatas ]]></b:skin> , jika tidak ada letakan diatas  </style> (coba mana yang cocok)

KODE Click tanda panah dibawah

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6WnfEDamJEDNCrpdzakWfbf9j-Kzmqb6SJ8CIuXVndjs2gl5ArdKdOU62Kr_Ix6Ny1TqFAr9y1nyiFnBB92u0CR4Ts35nsE3CG_d1twNwmYmJdNtILCCeuFIBEHaS0FnXWnnE7-5BA/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXlmKNIZMQuNTV3Q08KxfEoCUrxpZC6TfSctb-F0ru4RTp4I13ocQkb1EEc1WtRewbhJfnRoXMZ9m0xO8qQIoINSX5SIbbrB40gj9C7GqPwO2jMAf_BJIAjdyo1Ppzq3ttmFvWb4qUQ/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81PYOByLzJq-yOpnWQizs_nkau_sUwbJAiNveuPjMI4YxKQsztP1zr6rrb8L9PTXe1J2TKNfelZi5cgiWlVoTCyz5vYq6dXN21-CJzO5Yh5HuSkSkqJ9e54aOORRGFv5W9KSUdKFOeA/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

Langkah selanjutnya, letakan kode dibawah ini diatas </head>, kode warna merah dibawah (jQuery Plugin) jika sudah ada di template kamu maka tidak usah ditambahkan lagi. 

KODE Click tanda panah dibawah

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/megamenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyPqvPTHcIjI0llYY_BDHbDR5Fn_riUFLGGyKC3tr9OJLZaodkX4LOwR-2M6mivzDF459_A4_EBsEMkapmVViqRajiT7DrWqrV9tfosk4u6ujkZmZkMwKXOy3UHVJi5e3AeZR3TJdVHA/s1600/no_image_available.png&#39;
 });
});
$(function(){
  $(&#39;.search-here&#39;).submit(function(e){
    if($(&#39;.search-box .search-field&#39;).val().length==0){
       $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);
      e.preventDefault();
    }
  });
});
</script>

Nah berikut adalah kode HTML yang harus kamu tambahkan juga. Perhatikan letak menu kamu yang lama kemudian ganti dengan kode dibawah ini. Atau jika ada kode <div class='main-outer'> di blog kamu letakan saja di atas  <div class='main-outer'>. 

KODE Click tanda panah dibawah

<ul class='megamenu' id='megamenuid'>

<li><a href='/'>Home</a></li>

<li><a class='menu-target' href='#'>MENU TITLE</a>

<ul>

<li><a href='http://www.kosim22.com/search/label/BELAJAR%20SEO'>LABEL 1</a></li>

<li><a href='http://www.kosim22.com/search/label/TENTANG%20KOMPUTER%20%2F%20LAPTOP'>LABEL 2</a></li>

<li><a href='http://www.kosim22.com/search/label/FREE%20APLIKASI%20KOMPUTER%20DAN%20LEPTOP'>LABEL 3</a></li>

</ul>

</li>

<li><a class='menu-target' href='#'>MENU TITLE</a>

<ul>

<li><a href='http://www.kosim22.com/search/label/TEMPELATE%20CORELDRAW'>LABEL 4</a></li>

<li><a href='http://www.kosim22.com/search/label/TEMPELATE%20CORELDRAW'>LABEL 5</a></li>

<li><a href='http://www.kosim22.com/search/label/TEMPELATE%20CORELDRAW'>LABEL 6</a></li>

</ul></li>

<li><a href='http://www.kosim22.com/search/label/TEMPELATE%20CORELDRAW'>Normal Link</a></li>

<li class='search-box'>

<form action='/search' class='search-here' method='get'>

<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>

<input class='search-button' type='submit' value=' '/>

</form>

<p class='search-alert'>Search form is empty!</p>

</li>

</ul>

<div class='clear'/>

</div>

Kamu ganti kode url berwarna biru di atas dengan link label kamu. Save tamplate dan selesai.

Pastikan juga setiap postingan kamu memiliki gambar yang relevan dengan menu dan submenu sehigga web atau blog kamu memiliki tampilan yang kohesif dan memliki daya tarik tersendiri. Selamat mencoba.

Keywords : cara membuat page menu ajax , cara membuat page menu dengan icon , cara membuat page menu dengan gambar

Share this post