cara mudah membuat mega menu di blogger cara mudah membuat mega menu di blogger - mizipediacom mizipediacom: cara mudah membuat mega menu di blogger










KATEGORI

LIVE TV

Iklan Semua Halaman

cara mudah membuat mega menu di blogger

Jumat, 14 April 2017



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.
Lihat Juga