cara mudah membuat mega menu di blogger




cara mudah membuat mega menu di blogger
Cara Mudah Membuat Menu Mega di Blogger


Penjelasan kali ini adalah mengenai tentang cara mudah membuat mega menu di blogger, menu ini sangat keren sekali dan bisa membuat blog anda tambah kece, tidak hanya itu menu mega berfungsinya adalah menu dengan penyimpanan yang banyak dan di sertai jquery dan sehingga tampilan menu mega ini akan buka tutup pada saat anda klik seperti slider. 
Jika anda ingin membuat menu mega ini silahkan anda baca tutorial ini ya, dan kirainya kita perlu banyak basa basi langsung saja ke langkah-langkah cara membuatnya


Cara mudah membuat mega menu

1. Pertama , pastikan sobat udah masuk di dasbhor sobat sendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode dibawah ini :
4. Simpan kode ini di atas ]]></b:skin>
ul.ldd_menu{ z-index:999;  margin:0px;  padding:0;  display:block;  height:50px;  background-color:#D04528;  list-style:none;  font-family:"Trebuchet MS",sans-serif;  border-top:1px solid #EF593B;  border-bottom:1px solid #EF593B;  border-left:10px 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:#D04528;  height:50px;  line-height:50px;  cursor:default;  padding:0px 20px;  text-shadow:0px 0px 1px #fff;  border-right:1px solid #DF7B61;  border-left:1px solid #C44D37}
ul.ldd_menu .ldd_submenu{ z-index:999;  position:absolute;  top:50px;  width:550px;  display:none;  opacity:0.95;  left:0px;  font-size:10px;  background:#C34328;  border-top:1px solid #EF593B;  -moz-box-shadow:0px 3px 4px #591E12 inset;  -webkit-box-shadow:0px 3px 4px #591E12 inset;  -box-shadow:0px 3px 4px #591E12 inset}
a.ldd_subfoot{ z-index:999;  background-color:#f0f0f0;  color:#444;  display:block;  clear:both;  padding:15px 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:20px 0px 10px 30px;  padding:10px}
li.ldd_heading{ font-family:Georgia,serif;  font-size:13px;  font-style:italic;  color:#FFB39F;  text-shadow:0px 0px 1px #B03E23;  padding:0px 0px 10px 0px}
ul.ldd_menu ul li a{ font-family:Arial,serif;  font-size:10px;  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:#AF412B}
5. Kemudian anda cari kode </head> dan copy code di bawah ini 
6. Pastekan di atas kode </head>

<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 = $(&#39;#ldd_menu&#39;);
$menu.children(&#39;li&#39;).each(function(){
var $this = $(this);
var $span = $this.children(&#39;span&#39;);
$span.data(&#39;width&#39;,$span.width());
$this.bind(&#39;mouseenter&#39;,function(){
$menu.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();a
$span.stop().animate({&#39;width&#39;:&#39;510px&#39;},300,function(){
$this.find(&#39;.ldd_submenu&#39;).slideDown(300);
});
}).bind(&#39;mouseleave&#39;,function(){
$this.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
$span.stop().animate({&#39;width&#39;:$span.data(&#39;width&#39;)+&#39;px&#39;},300);
});
});
});
</script>
7. Kemudian anda masukan kode di bawah ini dan di pastekan di bawah kode  <div id='header-wrapper'>
bisa juga di bawah </header>

<ul class='ldd_menu' id='ldd_menu'>
<li>
<span>Vacations</span><!-- Increases to 510px in width-->
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>By Location</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Category</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Theme</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<a class='ldd_subfoot' href='#'> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>By Location</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Category</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Theme</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<a class='ldd_subfoot' href='#'> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>By Location</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Category</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Theme</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<a class='ldd_subfoot' href='#'> + New Deals</a>
</div>
</li>
<li>
<span>Tourists</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>By Download</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Category</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Theme</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<a class='ldd_subfoot' href='#'> + New Deals</a>
</div>
</li>
</ul>
8. Sampai tahap ini sudah selesai.
9. Lalu anda klik save template. dan lihat hasilnya.
Note: Anda Edit tulisan masukkan link anda disini dengan memasukan alamat URL Blog anda. 

Demikian penjelasan kali ini tentang  cara mudah membuat mega menu di blogger, jika ada yang kurang jelas bisa di tanyakan, saya akan membantu anda. selamat mencoba dan berhasil.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect