Tips Mempercatik Blog dengan Mega Menu Drop Down.

Tips Mempercatik Blog dengan Mega Menu Drop Down. - Apa itu mega menu drop down ? Mungkin pertanyaan tersebut yang pertama kalo terlintas setelah membaca judul di atas. Pertama kali terpikirkan mungkin menu drop down biasa yang tidak ada keistimewa-annya. Tanpa ada suatu keunikan tersendiri dengan yang lain, mungkin hanyalah tampilan yang sedikit diubah-ubah.

Mega menu di sini adalah menu bar yang memiliki lebih dari satu subbab menu dalam tiap menu utama yang ditampilkan. Menu ini berbeda bila dibandingkan dengan menu drop down biasanya, karena biasanya satu menu utama akan menampilkan sub menu-sub menu lainnya tanpa menampilkan secara langsung subbab menu tersebut. Bingung ya? Untuk lebih jelasnya anda bisa membandingkan kedua gambar di bawah ini beserta penjelasannya.

Mega Menu Drop Down

Cara Membuat

1. Masukkan kode css di bawah ini di atas kode ]]></b:skin>

/* mega menu drop down */
ul.ldd_menu{
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{
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{
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{
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;
}

2. Masukkan kode html di bawah melalui tambah widget atau dengan cara:

Layout/Tata Letak > Add a Gadget
Pilih HTML/Javascript > Masukkan kode di bawah ini tanpa menggunakan judul. Jangan lupa tambahkan gadget dan letakkan di bagian atas/ dekat dengan 'pages-menu'

<ul id="ldd_menu" class="ldd_menu">
<li>
<span style="width: 67px;">Blog</span>

<div class="ldd_submenu" style="display: none;">
<ul>
<li class="ldd_heading">Jenis</li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Curhat</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Hacking</a></li>
<li><a href="#">Nano-nano</a></li>
</ul>
<ul>
<li class="ldd_heading">Isi</li>
<li><a href="#">SEO</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Google Adsense</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Hacking and Cracking</a></li>
</ul>
<ul>
<li class="ldd_heading">Tentang Blog</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Privacy Police</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Donate Us</a></li>
<li><a href="#">DMCA Protection</a></li>
<li><a href="#">Tukar Link</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span style="width: 76px;">Lengkapnya</span>
<div class="ldd_submenu" style="display: none;">
<ul>
<li class="ldd_heading">Jenis</li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Curhat</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Hacking</a></li>
<li><a href="#">Nano-nano</a></li>
</ul>
<ul>
<li class="ldd_heading">Isi</li>
<li><a href="#">SEO</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Google Adsense</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Hacking and Cracking</a></li>
</ul>
<ul>
<li class="ldd_heading">Tentang Blog</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Privacy Police</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Donate Us</a></li>
<li><a href="#">DMCA Protection</a></li>
<li><a href="#">Tukar Link</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span style="overflow: hidden; width: 67px;">Seputar Blog</span>
<div class="ldd_submenu" style="display: none;">
<ul>
<li class="ldd_heading">Jenis</li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Curhat</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Hacking</a></li>
<li><a href="#">Nano-nano</a></li>
</ul>
<ul>
<li class="ldd_heading">Isi</li>
<li><a href="#">SEO</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Google Adsense</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Hacking and Cracking</a></li>
</ul>
<ul>
<li class="ldd_heading">Tentang Blog</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Privacy Police</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Donate Us</a></li>
<li><a href="#">DMCA Protection</a></li>
<li><a href="#">Tukar Link</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
</ul>
<script type="text/javascript" src="https://sagitariusadhi-jg.googlecode.com/svn/branches/shaggy.megamenudropdown.js"></script><div style="clear:both;"></div>

Info: Untuk yang berwarna Merah merupakan Menu Utama, berwana biru merupakan SubMenu, untuk <a href="#"> silahkan ganti dengan alamat URL yang sobat inginkan.

NB: jika menempatkan kode HTML di atas melalui HTML/Javascript kacau, maka dapat melalui:

Template > Edit Template
Cari kode <div id="content-wrapper"> dan letakkan tepat di atasnya.

Mungkin sekian postingan dari saya semoga postingan ini dapat berguna bagi pembaca semuanya khususnya para sobat blogger.