Membuat Menu Mega Drop Down Horizontal

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. Sebelum anda melanjutkan anda bisa melihat DEMONYA

Cara Membuat Menu Mega Drop Down Horizontal

1.Copy kode mega drop down dibawah ini, untuk lebih mudahnya anda klik icon view source pada syntax highlighter dibawah ini untuk mengambil kodenya (kode menu mega drop down).

<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 kangroni 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="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/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>Kangroni 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="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Kang roni 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="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/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. Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan Kang Roni jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo? Alasan kang roni memberi nama CSS Seo karena menu Horizontal.</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="#">Kang roni 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="#">Kang roni</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="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Kangroni blog :Prediksi/Estimate/prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page.<a href="#">Read more...</a></p>
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page. <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("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/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://roningasinanblog.blogspot.com/" title="OPTIMASI SEO" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

2.Selanjutnya buka akun blogger anda kemudian masuk pada Tata Letak -> Klik Tambah Gadget -> Kemudian klik/pilih HTMLJavascript untuk memasukkan kode mega drop down.
3.Simpan dan selesai.

Untuk mengenal kode kode di atas saya akan menjelaskan Bagian bagian Kode 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 kangroni 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="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/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>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>Kangroni 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="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Kang roni 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="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/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. Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan Kang Roni jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo? Alasan kang roni memberi nama CSS Seo karena menu Horizontal.</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="#">Kang roni 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="#">Kang roni</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="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Kangroni blog :Prediksi/Estimate/prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page.<a href="#">Read more...</a></p>
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page. <a href="#">Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>

6.Selanjutnya yaitu kode CSS yang bisa anda ubah untuk menyesuaikan tampilan antara menu mega drop down dengan tampilan blog,kode cssnya bisa anda lihat di atas dari mulai kode pada baris 171 sampai 458.


Related Post:

65 comments:

ABC TENANG said...

TERIMAKASIH YG BANYAK BOSSS

Denny blogspot said...

assalamualaikum kang roni, link nya sudah saya pasang dengan rapi di blog saya,, silahkan di cek..http://dennyaby321.blogspot.com/
pasanng link saya juga ya kang..

Rudy Hartono said...

makasih sob udah share

Do'a Ibu said...

Makasih banyak mas infonya salam kenal

pengencang payudara said...

blogwalking nih gan, mumpung malem minggu. hehhehe, nice post.. ^_^

pengencang payudara said...

nice post, gan.. sangat bermanfaat sekali untuk dibaca. blognya juga bagus.

cara menghaluskan kulit wajah said...

semoga dapat bermanfaat buat kita semua. Amin . . . . artikelntya sangat bagus sekali. Senang sekali berkunjung ke website anda.

cara merapatkan vagina said...

terima kasih atas informasinya. Sukses ya Terimakasih banyak telah berbagi informasnya,sukses selalu untuk info beserta websitenya,,

Produk dr Boyke said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih.

pria perkasa said...

semoga dapat ebrmanfaat dan menjadi inspirasi.. terima kasih ya gan infonya semoga makin jaya..

perawatan payudara said...

Teriamakasih infonya. semoga bermanfaat buat kita semua. salam sehat!! Informasinya sangat menarik sekali.

cara diet sehat dan cepat said...

semoga dapat bermanfaat buat kita semua. Amin . . . . artikelntya sangat bagus sekali. Senang sekali berkunjung ke website anda.

fiforlif said...

semoga dapat bermanfaat buat kita semua. Amin . . . . artikelntya sangat bagus sekali. Senang sekali berkunjung ke website anda.

biolo said...

thanks for information succes always

makanan untuk penderita diabetes said...

bagus sekali informasi yg agan berikan ini. Jelsa sekali sangat menarik dan bermanfaat. thanks gan!! Thanks banget!! ijin share berbagi info :)

ladyfem said...

selamat datang bulan desember!! semoga bulan ini membawa berkah dan membukakan pintu kesuksesan serta kebahagiaan untuk kami semua. Amiin,

jual foredi said...

terimakasih gan. bermanfaat!

atasi ejakulasi dini said...

entahlah. memang tidak akan bisa membahagiakan semuanya

agen resmi foredi said...

artikelntya sangat bagus sekali. Senang sekali berkunjung ke website anda.

cara pesan cream oris said...

terimakasih untuk semuanya bunda. saya tau, bisa mu segitu. cukup, sangat cukup. terimakasih

merawat payudara secara alami said...

Senang sekali berkunjung ke website anda.

memperbesar payudara said...

rasa kecewa pun bisa menjadi pelajaran berharga

pengencang payudara said...

terimakasih semua partisipasinya

ramuan tahan lama said...

Terimakasih infonya. semoga bermanfaat buat kita semua. salam sehat!! Informasinya sangat menarik sekali, selamat hari libur natal & tahun baru..!

cara mengobati ejakulasi dini said...

Mohon maaf ya jika terjadi banyak kesalahan dan kekurangannya dalam ngesub Anime yang satu ini…….

sewa pick up said...

terima kasih masukannya....

pria perkasa said...

beritanya bagus dan sangat menarik sekali untuk di baca. Ijin share ya gan, thanks..

obat penyubur sperma said...

Terimakasih, artikelntya sangat bagus sekali. Senang sekali berkunjung ke website anda. semoga dapat bermanfaat buat kita semua. Amin . . . . :D :D

penyebab payudara kendur said...

"Kasih sayang sebagai seorang ayah mampu menahan beban hidup untuk kebahagiaan anaknya." Sekalian Blogwalking ya, gan? semoga hari ini penuh berkah.. Amiinn

cara mengatasi nyeri haid said...

Terimakasih infonya. semoga bermanfaat buat kita semua. salam sehat!! Informasinya sangat menarik sekali, selamat hari natal & tahun baru 2015..! haha

cara mengatasi impotensi said...

Terimakasih, artikelntya sangat bagus sekali. Senang sekali berkunjung ke website anda. semoga dapat bermanfaat buat kita semua. Amin . . . . :D :D

efek samping oris breast cream said...

"Kasih sayang sebagai seorang ayah mampu menahan beban hidup untuk kebahagiaan anaknya." Sekalian Blogwalking ya, gan? semoga hari ini penuh berkah.. Amiinn

Anonymous said...

nitip salam gan, makasih tutorialnya + nice share gan, smoga ini tutorial + sharing nya bisa bermanfaa buat semuanya gan

Poker Online
Agen Poker Online
Poker Online Indonesia

harga oris breast cream said...

"Kasih sayang sebagai seorang ayah mampu menahan beban hidup untuk kebahagiaan anaknya." Sekalian Blogwalking ya, gan? semoga hari ini penuh berkah.. Amiinn

makanan untuk penderita kolesterol said...

terima kasih atas informasinya. Sukses ya..!! Dan Terimakasih banyak telah berbagi informasnya, Semoga Makin Keren selalu untuk info beserta websitenya,,

harga ladyfem said...

teirma kasih banyak karena sudah berbagi berita yang sangat menarik. zaman sekarang sudah jarang menemukan blog yang isinya penuh manfaat seperti ini, keren!!

cara tahan lama said...

teirma kasih banyak karena sudah berbagi berita yang sangat menarik. zaman sekarang sudah jarang menemukan blog yang isinya penuh manfaat seperti ini, keren!!

oris breast cream said...

"Kasih sayang sebagai seorang ayah mampu menahan beban hidup untuk kebahagiaan anaknya." Sekalian Blogwalking ya, gan? semoga hari ini penuh berkah.. Amiinn

agen fiforlif bandung said...

infonya sangat bermanfaat sekali gan, makasih. beritanya bagus dan sangat menarik sekali untuk di baca. Ijin share ya gan, thanks..semoga semakin bermanfaat!

agen oris breast cream bandung said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali lagi thanks.

Perawatan Tubuh Wanita said...

baaagus sekaliii informasi yg agaaaan berikan ini. Jelaaaaassssss sekali sangat menarik dan bermanfaat. thanks gan!! Thanks banget!! ijin share berbagi info :)

penyebab ejakulasi dini dan cara mengatasinya said...

infonya sangat bermanfaat sekali gan, makasih. beritanya bagus dan sangat menarik sekali untuk di baca. Ijin share ya gan, thanks..semoga semakin bermanfaat!

ramuan tahan lama said...

"Kasih sayang sebagai seorang ayah mampu menahan beban hidup untuk kebahagiaan anaknya." Sekalian Blogwalking ya, gan? semoga hari ini penuh berkah.. Amiinn

cara mengencangkan payudara secara alami said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali

lagi thanks.

cara mengobati ejakulasi dini secara alami said...

Terimakasih atas semua artikel bermanfaat yang sudah anda publikasikan melalui blog yang menarik ini, saya tunggu postingan selanjutnya, have a nice day, kawan :)

noval eko Budianto said...

makasih tipsnya,sangat berguna sekali.
Dari NORAFILA

pria perkasa rekomendasi boyke said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali lagi thanks.

mengatasi payudara kendur akibat menyusui said...

must say that overall I am really impressed with this blog. It is easy to see that you are passionate about your writing. Looking forward to more updates..!!

cara tradisional mengencangkan payudara said...

Postingan ini sangat bermanfaat, memberikan informasi mengenai hal yang belum diketahui. Semoga postingan ini bisa memberikan motivasi untuk selalu ingin tahu.

cara mengecilkan perut rekomendasi boyke said...

terima kasih atas informasinya. Sukses ya..!! Dan Terimakasih banyak telah berbagi informasnya, Semoga Makin Keren selalu untuk info beserta websitenya,,

cara mengatasi keputihan yang gatal said...

infonya sangat bermanfaat sekali gan, makasih. beritanya bagus dan sangat menarik sekali untuk di baca. Ijin share ya gan, thanks..semoga semakin bermanfaat!

cara mengatasi sembelit said...

website ini selalu mnenghangatkan saya dalam membuat artikel, terimakasih atas wawasan yang anda berikan cukup mudah di pahami. Terimakasih banyak,..

CARA DETOX ALAMI said...

Terimakasih, postingan-nya sangat bagus sekali. Senang sekali berkunjung ke blog anda. saya bantu share ya gan? semoga dapat bermanfaat buat kita semua. Amin :D :D

ramuan tahan lama said...

Postingan ini sangat bermanfaat, memberikan informasi mengenai hal yang belum diketahui. Semoga postingan ini bisa memberikan motivasi untuk selalu ingin tahu.

MAKANAN UNTUK PENDERITA KOLESTEROL said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali lagi thanks.

Penyebab keputihan dan cara mengatasinya said...

Postingan ini sangat bermanfaat, memberikan informasi mengenai hal yang belum diketahui. Semoga postingan ini bisa memberikan motivasi untuk selalu ingin tahu.

CARA ALAMI MENGOBATI KEPUTIHAN said...

Hadir kembali berkunjung dihari yang indah dan cuaca yang cerah ini, terimakasih teman karena selalu berbagi info menarik yang ter up to date, keep blogging!!

OBAT OLES PRIA said...

sudah beberapa hari saya mencari berita seperti ini, dan akhirnya.. akhirnya ketemu!! terimakasih nih ya? postingannya sangat berharga bagi saya, thanks gan!

Fiforlif said...

Sebentar lagi hari raya idul adha akan tiba, jangan lupa puasa arafah bagi yang muslim, semoga tahun ini membawa berkah dan kebahagiaan. Keep posting, gan..

cara melangsingkan tubuh setelah melahirkan said...

Terimakasih gan, keep blogging. templatenya bagus ini, pengen deh punya blog kayak gini.

Jarang Jalan said...

Postingannya Serius gan. Mantap.

Jasa pembuat website di bali said...

tutorialnya mantaps nih gan

jasa pembuat website di bali

Pritonoe said...

Tutorialnya mantap gan untuk Membuat Drop Down Horizontal,mau nyoba dulu. Sukses untuk tutorial lainnya

Agen Poker Terbaik said...

Nice isi artikel jelas dan mudah dipahami TQ Bos..

Hindarto said...

Baru tau cara buat menu drop down horizontal, biasanya pake vertical..

Post a Comment