Cara Membuat Megamenu Blog

Selamat malam, berjumpa lagi dengan saya, pada artikel kali ini saya akan memberikan informasi tentang bagaimana cara membuat megamenu di blogspot

Baca juga: Blogger Pemula Wajib Tahu! Ini Perbedaan Optimasi SEO Onpage dan SEO Offpage Pada Blog

Sebagaimana telah kita ketahui bersama bahwa menu navigasi merupakan komponen utama yang harus dimiliki oleh suatu blog, website, atau situs, akan tetapi kebanyakan menu-menu tersebut tampilannya relatif sederhana dan biasa saja, terkadang saya juga merasa jenuh bila melihat menu tersebut. Berdasarkan pengalaman saya mengunjungi beberapa blog yang saya jadikan sebagai sarana belajar dalam membangun blog ini, akhirnya saya terfikirkan untuk membuat suatu menu blog yang unik, yang lain dari yang lain, yang tidak mudah ditiru oleh semua orang.

Baca juga:  Tahapan Membuat Blog Untuk Pemula, Pasti Langsung Bisa

Akhirnya setelah blogging sana-sini saya berhasil menemukan sebuah cara membuat suatu menu blog yang menurut saya sangat unik dan sederhana namun kontennya sangat powerfull sekali, menu ini disebut dengan istilah "Megamenu", berikut adalah tampilan screenshootnya:

Sebenarnya sangat banyak sekali tutorial yang mengajarkan langkah-langkah cara membuat megamenu ini, akan tetapi tidak semuanya bisa saya terapkan karena mereka menyajikan cara yang berbeda-beda, dan pada artikel kali ini saya akan share sebuah cara yang sudah saya praktekkan sendiri pada blog ini, dan menurut saya cara inilah yang paling mudah dan aman untuk digunakan, saya memakai istilah aman karena tidak semua cara bisa langsung kita terapkan, terkadang setelah menerapkan salah satu cara terus blog kita malah jadi eror, oleh karena itu saran saya pakailah cara seperti saya ini.

Baiklah langsung saja, berikut adalah lanhkah-langkah bagaimana "Cara membuat Megamenu blog" yang aman :

1. Log in ke blogger
2. Klik "Template"
3. Klik "Edit HTML"
4. Masukkan script berikut di atas kode :
   

]]></b:skin>

Taruh script berikut di atasnya:

ul.ldd_menu{ z-index:999; margin:15px; padding:0; display:block; height:40px; background-color:#52e052; list-style:none; font-family:"Trebuchet MS",sans-serif; border-top:1px solid #231f20; border-bottom:1px solid #231f20; border-left:0px solid #D04528; -moz-box-shadow:0px 3px 4px #591E12; -webkit-box-shadow:0px 3px 4px #591E12; -box-shadow:0px 3px 4px #591E12} ul.ldd_menu a{ text-decoration:none} ul.ldd_menu >li{ float:left; position:relative} ul.ldd_menu >li >span{ z-index:999; float:left; color:#fff; background-color:#16bc16; height:40px; line-height:40px; cursor:default; padding:0px 10px; text-shadow:0px 0px 1px #fff; border-right:1px solid #231f20; border-left:0px solid #231f20} ul.ldd_menu .ldd_submenu{ z-index:999; position:absolute; top:40px; width:758px; display:none; opacity:0.95; left:0px; font-size:10px; background:#067606; border-top:1px solid #52e052; -moz-box-shadow:0px 3px 4px #a8fb26 inset; -webkit-box-shadow:0px 3px 4px #a8fb26 inset; -box-shadow:0px 3px 4px #52e052 inset} a.ldd_subfoot{ z-index:999; background-color:#f0f0f0; color:#444; display:block; clear:both; padding:10px 20px; text-transform:uppercase; font-family:Arial,serif; font-size:12px; text-shadow:0px 0px 1px #fff; -moz-box-shadow:0px 0px 2px #777 inset; -webkit-box-shadow:0px 0px 2px #777 inset; -box-shadow:0px 0px 2px #777 inset} ul.ldd_menu ul{ list-style:none; float:left; border-left:1px solid #DF7B61; margin:10px 0px 10px 10px; padding:5px} li.ldd_heading{ font-family:Georgia,serif; font-size:13px; font-style:italic; color:#a8fb26; text-shadow:0px 0px 1px #a8fb26; padding:0px 0px 10px 0px} ul.ldd_menu ul li a{ font-family:Arial,serif; font-size:11.5px; line-height:20px; color:#fff; padding:1px 3px} ul.ldd_menu ul li a:hover{ -moz-box-shadow:0px 0px 2px #333; -webkit-box-shadow:0px 0px 2px #333; box-shadow:0px 0px 2px #333; background:#0b4e0b}

5. Setelah itu masukkan kode berikut di atas kode

 

]]></head>

Taruh script berikut di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(function() { var $menu = $('#ldd_menu'); $menu.children('li').each(function(){ var $this = $(this); var $span = $this.children('span'); $span.data('width',$span.width()); $this.bind('mouseenter',function(){ $menu.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':'510px'},300,function(){ $this.find('.ldd_submenu').slideDown(300); }); }).bind('mouseleave',function(){ $this.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':$span.data('width')+'px'},300); }); }); }); </script>

6. Baiklah, tinggal satu langkah lagi, Selanjutnya masukkan kode berikut di bawah kode:

 

<div class='region-inner main-inner'>

Taruh script berikut di bawahnya:

<ul class='ldd_menu' id='ldd_menu'> <li> <span>Menu utama</span> <div class='ldd_submenu'> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> -xxx>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> <li class='ldd_heading'>Menu</li> -xxx>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> -xxx>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <a class='ldd_subfoot' href='#'> Thank you ^_* </a> </div> </li> <li> <span>Class</span> <div class='ldd_submenu'> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> <li><a href='#'/></li> </ul> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <a class='ldd_subfoot' href='#'> semangart ^_* </a> </div> </li> <li> <span>Article</span> <div class='ldd_submenu'> <ul> <li class='ldd_heading'>Menu</li> -Main menu =>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> -Main menu =>> </ul> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> -xxx =>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> -xxx =>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <a class='ldd_subfoot' href='#'> semangart ^_* </a> </div> </li> <li> <span>Menu utama</span> <div class='ldd_submenu'> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <a class='ldd_subfoot' href='#'> semangart ^_* </a> </div> </li> <li> <span>Menu utama</span> <div class='ldd_submenu'> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> -xxx =>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> -xxx =>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <ul> <li class='ldd_heading'>Menu</li> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </ul> <a class='ldd_subfoot' href='#'> semangart ^_* </a> </div> </li> <li> <span>Menu utama</span> <div class='ldd_submenu'> <ul> <li class='ldd_heading'>Main menu</li> -xxx=>> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> -xxx=>> </ul> <ul> <li class='ldd_heading'>Main menu</li> </ul> <li><a href='Link'>Sub menu 1</a></li> <li><a href='Link'>Sub menu 2</a></li> <li><a href='Link'>Sub menu 3</a></li> </div> </li> </ul>

Baca juga: Translate Inggris, Cara Membuat Widget Translate HTML Blog Ringan

Demikian langkah-langkahnya, simpan Template dan lihat hasilnya. Selamat mencoba dan semoga berhasil, terimakasih.