Contact
Cara membuat mega drop down menu blogspot horizontal
Apa itu menu mega drop down? menu yang bisa menampung link dengan jumlah yang sangat besar yang terbagi dalam beberapa kolom,menu mega drop down ini tidak hanya unggul dalam quota link akan tetapi menu super power ini juga power speed (load page cepat dan ringan) karena menggunakan kode css dengan kombinasi kode html,menu mega drop down tidak diragukan lagi untuk dapat mempercantik blog dengan kapasitas posting yang sangat banyak dan sangat tepat untuk seorang blogger profesional yang mempunyai disiplin dan kemauan besar untuk membuat blog dengan sempurna.
Mega Drop Down Browser Support
Menu mega drop down horizontal sudah teruji dibeberapa peramban diantaranya yaitu Opera, Safari, Mozilla, Google Chrome, dan internet explore jadi anda tidak perlu khawatir untuk melengkapi blog anda dengan menu mega drop down horizontal bila anda berminat untuk mempercantik blog.
Bagaimana cara Membuat Menu Mega Drop Down?
Untuk membuat menu mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi seorang blogger profesional untuk dapat membuatnya, karena pada dasarnya anda hanya perlu melakukan copy code, paste code, mengganti link tujuan, save dan selesai mudah bukan.Dibawah ini nanti akan saya jelaskan dengan sangat detail untuk membuat menu mega drop down dengan bagian bagian kode yang ada pada menu mega drop down.
Cara Membuat Menu Mega Drop Down Horizontal
Langkah 1. pergi ke akun blogger anda masuk pada Tata Letak
Langkah 2. Klik tambahkan Gadget
Langkah 2. Klik tambahkan Gadget
Langkah 3. kemudian pilih/klik HTML Javascript untuk memasukkan kode mega drop down, Copy kode mega drop down di bawah ini :
<div id="menu">
<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p>Selamat datang di murdoxs blog ! Ini adalah karya yang mengagumkan dari Mega Drop Down Menu.</p>
<p>Menu ini dilengkapi dengan berbagai macam gaya yang mengagumkan dan disiapkan untuk judul, daftar dll.</p>
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinqEpLzy9ecHgUqBF4v2dkOvA69-Yx9Ji08mW51899s4QAaOOdOC_epQFu0QZFUUYHfuKCgB7iyWklwjsJypxgNy7YNGMLSxBkRA-Z0ynISHyquEPAo6IH4agtWUzfk8Mcrl0_3nAmIaQG/s1600/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Mega drop down ini telah teruji dibeberapa peramban utama.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<div class="col_5">
<h2>Ini adalah contoh dari sebuah wadah besar dengan 5 kolom</h2>
</div>
<div class="col_1">
<p class="black_box">Ini adalah kotak teks warna abu abu gelap. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p>Kang roni blog Tutorial blog optimasi seo blogspot. Kunjungi dan dapatkan tutorial lengkap.</p>
</div>
<div class="col_1">
<p class="italic">Ini adalah contoh dari suatu teks miring. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p>Murdoxs blog:Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p class="strong">Ini adalah contoh dari teks tebal. Menu mega drop down yang bisa menampung link dengan jumlah yang sangat besar.</p>
</div>
<div class="col_5">
<h2>Berikut adalah konten dengan gambar sisi</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHmtACfk5mw3IEX8D2gHjex0wwN3uhXCNWly2rkL5qB1d2GIwHcnPUS7Yjfwq6zdzpfoURRwYwneI66K0CtIA4Mlo1l33stkBjFf4A3ocTK8Ho5CVYN47HF-vNrKr39u-HsgNOHWIeE5Qq/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Murdoxs blog Tutorial blog optimasi seo. Kunjungi dan dapatkan tutorial lengkap Membuat dan Mengganti Thema Syntax Highlighter Blog Syntax highlighter atau perintah untuk membuat penyorotan stabilo dengan.<a href="#">Read more...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lRxBtNZYqY5kQPVmV5rS1jk_917wnT-gbaIkYe44Fe4OjdnUx4MwX4x8yL_VUbXk5Sf1xlkTIE-a25uRhxlLqIwkHpEWi_SkI1lYH3611EdXnldDN_9ICFoRlelH-Cu2Tz92dMovobcu/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Cara Mudah Menambah dan Membuat Cantik Footer Footer blog adalah bagian paling bawah pada halaman blog yang mempunyai baerbagai fungsi diantaranya adalah sebagai tempat untuk menambahkan gadget yang.<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">Ini adalah kotak hitam, Anda dapat menggunakannya untuk menyoroti beberapa konten.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Ini adalah judul judul Post</h2>
</div>
<div class="col_1">
<h3>Beberapa Links</h3>
<ul>
<li><a href="#">Murdoxs blog</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Optimasi</a></li>
<li><a href="#">Seo Blog</a></li>
<li><a href="#">Blogger Seo</a></li>
</ul>
</div>
<div class="col_1">
<h3>Tautan lainnya</h3>
<ul>
<li><a href="#">Murdoxs</a></li>
<li><a href="#">Membuat</a></li>
<li><a href="#">Cara buat</a></li>
<li><a href="#">Menu blog</a></li>
<li><a href="#">Drop down</a></li>
</ul>
</div>
<div class="col_1">
<h3>Tautan lainnya</h3>
<ul>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Optimasi</a></li>
<li><a href="#">Blogspot</a></li>
<li><a href="#">Seo</a></li>
<li><a href="#">Profesional</a></li>
</ul>
</div>
<div class="col_1">
<h3>Tautan</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li class="menu_right"><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Daftar di box</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
<div class="col_3">
<h2>Berikut adalah beberapa contoh gambar</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lRxBtNZYqY5kQPVmV5rS1jk_917wnT-gbaIkYe44Fe4OjdnUx4MwX4x8yL_VUbXk5Sf1xlkTIE-a25uRhxlLqIwkHpEWi_SkI1lYH3611EdXnldDN_9ICFoRlelH-Cu2Tz92dMovobcu/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>diisiyaaaaa | blalalalaa.<a href="#">Read more...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHmtACfk5mw3IEX8D2gHjex0wwN3uhXCNWly2rkL5qB1d2GIwHcnPUS7Yjfwq6zdzpfoURRwYwneI66K0CtIA4Mlo1l33stkBjFf4A3ocTK8Ho5CVYN47HF-vNrKr39u-HsgNOHWIeE5Qq/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>diisiyaaaaa | blaaaaaaaa.<a href="#">Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>
<style type="text/css">
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
/* Navigation Bar */
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsyhedzbUCSqj4tqpE8oeOgdUCxMgzHV27XfWyRAUto2F7gddzZnCVv3I1rKniZ5JzJqNkMLer06npSNIAheQWUvRayyWlply9zpEhqOZoDQNHl1ibU_W1GC00TlyOKtmZD-eyTG-O6Di/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsyhedzbUCSqj4tqpE8oeOgdUCxMgzHV27XfWyRAUto2F7gddzZnCVv3I1rKniZ5JzJqNkMLer06npSNIAheQWUvRayyWlply9zpEhqOZoDQNHl1ibU_W1GC00TlyOKtmZD-eyTG-O6Di/s1600/drop.png") no-repeat right 7px;
}
/* Drop Down */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute !important;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px ;
z-index:444 !important;
top:auto;
}
/* Columns */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
/* Right alignment */
#menu .menu_right {
float:right !important;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu div li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid transparent !important ;
}
</style>
<a href="http://murdoxs.blogspot.com/" title="Tutorial Blogger" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
Langkah 4. .....simpan dan selesai
Untuk mengenal kode mega drop down diatas, saya akan menjelaskan bagian-bagian kode menu mega drop down horizontal
1. kode menu mega drop down pada bagian Home.
<li><a href="#" class="drop">Home</a><!-- Begin Home Item --> <div class="dropdown_2columns"><!-- Begin 2 columns container --> <div class="col_2"> <h2>Welcome !</h2> </div> <div class="col_2"> <p>Selamat datang di murdoxs blog ! Ini adalah karya yang mengagumkan dari Mega Drop Down Menu.</p> <p>Menu ini dilengkapi dengan berbagai macam gaya yang mengagumkan dan disiapkan untuk judul, daftar dll.</p> </div> <div class="col_2"> <h2>Cross Browser Support</h2> </div> <div class="col_1"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinqEpLzy9ecHgUqBF4v2dkOvA69-Yx9Ji08mW51899s4QAaOOdOC_epQFu0QZFUUYHfuKCgB7iyWklwjsJypxgNy7YNGMLSxBkRA-Z0ynISHyquEPAo6IH4agtWUzfk8Mcrl0_3nAmIaQG/s1600/browsers.png" width="125" height="48" alt="" /> </div> <div class="col_1"> <p>Mega drop down ini telah teruji dibeberapa peramban utama.</p> </div> </div><!-- End 2 columns container --> </li><!-- End Home Item -->
2. kode menu mega drop down pada bagian 5 Columns.
<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<div class="col_5">
<h2>Ini adalah contoh dari sebuah wadah besar dengan 5 kolom</h2>
</div>
<div class="col_1">
<p class="black_box">Ini adalah kotak teks warna abu abu gelap. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p>Murdoxs blog Tutorial blog optimasi seo blogspot. Kunjungi dan dapatkan tutorial lengkap.</p>
</div>
<div class="col_1">
<p class="italic">Ini adalah contoh dari suatu teks miring. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p>Murdoxs blog:Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p class="strong">Ini adalah contoh dari teks tebal. Menu mega drop down yang bisa menampung link dengan jumlah yang sangat besar.</p>
</div>
<div class="col_5">
<h2>Berikut adalah konten dengan gambar sisi</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHmtACfk5mw3IEX8D2gHjex0wwN3uhXCNWly2rkL5qB1d2GIwHcnPUS7Yjfwq6zdzpfoURRwYwneI66K0CtIA4Mlo1l33stkBjFf4A3ocTK8Ho5CVYN47HF-vNrKr39u-HsgNOHWIeE5Qq/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>disiyaaaaaa | blalaalaa.<a href="#">Read more...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lRxBtNZYqY5kQPVmV5rS1jk_917wnT-gbaIkYe44Fe4OjdnUx4MwX4x8yL_VUbXk5Sf1xlkTIE-a25uRhxlLqIwkHpEWi_SkI1lYH3611EdXnldDN_9ICFoRlelH-Cu2Tz92dMovobcu/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>diisiyaaaaa | blalaalaa.<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">Ini adalah kotak hitam, Anda dapat menggunakannya untuk menyoroti beberapa konten.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
3. kode menu mega drop down pada bagian 4 Columns.
<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item --> <div class="dropdown_4columns"><!-- Begin 4 columns container --> <div class="col_4"> <h2>Ini adalah judul judul Post</h2> </div> <div class="col_1"> <h3>Beberapa Links</h3> <ul> <li><a href="#">Murdoxs blog</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Optimasi</a></li> <li><a href="#">Seo Blog</a></li> <li><a href="#">Blogger Seo</a></li> </ul> </div> <div class="col_1"> <h3>Tautan lainnya</h3> <ul> <li><a href="#">Murdoxs</a></li> <li><a href="#">Membuat</a></li> <li><a href="#">Cara buat</a></li> <li><a href="#">Menu blog</a></li> <li><a href="#">Drop down</a></li> </ul> </div> <div class="col_1"> <h3>Tautan lainnya</h3> <ul> <li><a href="#">Tutorial</a></li> <li><a href="#">Optimasi</a></li> <li><a href="#">Blogspot</a></li> <li><a href="#">Seo</a></li> <li><a href="#">Profesional</a></li> </ul> </div> <div class="col_1"> <h3>Tautan</h3> <ul> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> </div><!-- End 4 columns container --> </li><!-- End 4 columns Item -->
4. kode menu mega drop down pada bagian 1 Columns.
<li class="menu_right"><a href="#" class="drop">1 Column</a> <div class="dropdown_1column align_right"> <div class="col_1"> <ul class="simple"> <li><a href="#">FreelanceSwitch</a></li> <li><a href="#">Creattica</a></li> <li><a href="#">WorkAwesome</a></li> <li><a href="#">Mac Apps</a></li> <li><a href="#">Web Apps</a></li> <li><a href="#">NetTuts</a></li> <li><a href="#">VectorTuts</a></li> <li><a href="#">PsdTuts</a></li> <li><a href="#">PhotoTuts</a></li> <li><a href="#">ActiveTuts</a></li> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> </div> </li>
5. kode menu mega drop down pada bagian 3 Columns.
<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Daftar di box</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
<div class="col_3">
<h2>Berikut adalah beberapa contoh gambar</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lRxBtNZYqY5kQPVmV5rS1jk_917wnT-gbaIkYe44Fe4OjdnUx4MwX4x8yL_VUbXk5Sf1xlkTIE-a25uRhxlLqIwkHpEWi_SkI1lYH3611EdXnldDN_9ICFoRlelH-Cu2Tz92dMovobcu/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>diisiyaaaaa | blalaaaaa.<a href="#">Read more...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHmtACfk5mw3IEX8D2gHjex0wwN3uhXCNWly2rkL5qB1d2GIwHcnPUS7Yjfwq6zdzpfoURRwYwneI66K0CtIA4Mlo1l33stkBjFf4A3ocTK8Ho5CVYN47HF-vNrKr39u-HsgNOHWIeE5Qq/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>diisiyaaaaa | blalaaaaa.<a href="#">Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>
6. selanjutnya kode css yang bisa anda ubah untuk menyesuaikan tampilan antara menu mega drop down dengan tampilan blog. kode cssnya bisa anda lihat diatas dari mulai kode pada baris 171 sampai 458.
