Membuat Mega Menu Drop Down CSS3 di Blog

Membuat Mega Menu Drop Down CSS3 di Blog – menu ini lebih berbeda style dari tutorial menu drop down sebelumnya. Pada menu drop down ini memiliki sub menu yang bervariasi dan ukurannyapun cukup lebar sehingga dapat dengan mudah anda memasukan cuplikan atau highlight konten yang populer terdapat dalam blog anda kedalam sub menu mega drop down ini. Namun tidak hanya cuplikan konten saja, melainkan label atau kategori posting blog juga sekalian dapat anda masukan kedalam sub menu mega drop down dengan sangat simple. Dengan tema menu yang berwarna biru tua dan sub menu yang berwarna abu-abu dengan ruang konten yang cukup luas maka menu drop down ini sangat serasi untuk diterapkan kedalam blog berita atau bisa juga kedalam template blog wisata. Dengan begitu selain menu ini dapat mengambil fungsi sidebar blog akan tetapi juga dapat menyisipkan konten yang dirasa populer pada blog yang anda kelola tersebut. Untuk selebihnya, berikut adalah tutorial tentang bagaimana cara Membuat Mega Menu Drop Down CSS3 di Blog:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

#menu {
list-style:none;
width:auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
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;
display:block;
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: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-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/AVvXsEh6WkYx391_TglJa84hyphenhyphenCv5n0jHmJRAFZyzzgTF-TI2dLy-7JQa3ZBHTORXDgcr9B8P0YoqSwLVPUC5xmSqceDB6Wh9YXzACmeONP7hzBtjgDvgZHiHCezliS2PV5j5mxTjjtFDQcxTAh2d/s12/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6WkYx391_TglJa84hyphenhyphenCv5n0jHmJRAFZyzzgTF-TI2dLy-7JQa3ZBHTORXDgcr9B8P0YoqSwLVPUC5xmSqceDB6Wh9YXzACmeONP7hzBtjgDvgZHiHCezliS2PV5j5mxTjjtFDQcxTAh2d/s12/drop.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
-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;
top:auto;
}
.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;}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
-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;
}
#menu p, #menu h2, #menu h3, #menu ul 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 {
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;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-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;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-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;
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Langkah selanjutnya untuk menampilkan Mega Menu Drop Down CSS3 di Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode berikut ini didalamnya:

<ul id="menu">
<li><a href="#" class="drop">Home</a>
<div class="dropdown_2columns">
<div class="col_2">
<h2>Welcome !</h2></div>
<div class="col_2">
<p>Hallo selamat datang di sini! sebuah blog sederhana dengan fitur Menu Mega Drop Down.</p>           
<p>Item ini dilengkapi dengan berbagai macam disiapkan stylings tipografi seperti 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/AVvXsEgHGhsnP6MYU1v3T3VJU9SjUXuCPcqsd1bgDVfg4MvveQ6tRTndUuo_9wRygC1P3cfbugQz1km8EjYyA8GQlyCXOtrqlQ57iy9_QJA7xkBeYwkUJ54gngkS2KFno1yi6Vp0pa7sUiW-dXwl/s125/browsers.png" width="125" height="48" alt="" /></div>
<div class="col_1">
<p>Mega Menu ini telah diuji dalam beberapa browser utama.</p>
</div></div>
</li>

<li><a href="#" class="drop">Menu 1</a>
<div class="dropdown_5columns">
<div class="col_5">
<h2>Ini adalah contoh dari konten menu dengan 5 kolom</h2></div>
<div class="col_1">
<p class="black_box">Ini adalah kolom pertama. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_1">
<p>Ini adalah kolom kedua. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_1">
<p class="italic">Ini adalah kolom ketiga. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_1">
<p>Ini adalah kolom keempat. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_1">
<p class="strong">Ini adalah kolom kelima. Anda bisa mengganti dengan highlight konten yang di inginkan.</p></div>
<div class="col_5">
<h2>Berikut adalah beberapa konten dengan thumbnail</h2></div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbOf7QQmvhRP4X-k3589_EXlHr4XSekelhRD4obWsth7pkJKghBSpCC0sAZ87JxAYE2xJGEu34V_8B7Elrp-kxPlqbzv_ZuIuDa8jkg0qREoCczxBsW0FPHvloz5tfRHpFleuIXm-CS1Q/s320/3d-flip.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Efek Gambar 3D Flip Dengan CSS – Sebuah gambar pada posting blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan murni dan tidak memiliki efek.<a href="#">Read more...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwDQajn6-RLPK6fkPtlPbNJdur_X0yyTSf5NTs0GcfLA90g5hPPxSu01CLqmekBp72isVgSP5q-6Eo07s_vZroXTaPgECwV1M5lVQIe2b6ZJDq5kRZqEFCgh1fShSdLRkZnf4EHL2JYZk/s320/css-transisi.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi - Untuk lebih detailnya maka berikut adalah tutorial untuk cara membuat Efek Pull Out Gambar Dengan CSS3.<a href="#">Read more...</a></p></div>
<div class="col_2">
<p class="black_box">Membuat Gallery Gambar Efek Pop Up Image Dengan CSS - ini adalah galeri foto berbasis murni CSS yang menampilkan versi gambar yang lebih besar dari gambar thumbnail dinamis ketika gambar tersorot oleh mouse. Sebuah keterangan berupa bahasa HTML juga dapat ditambahkan ke dalam gambar yang diperbesar, dan setiap aspek dari Image Gallery terdapat keterangan HTML pada halaman.<a href="#">Read more...</a></p>
</div></div>
</li>

<li><a href="#" class="drop">Menu 2</a>
<div class="dropdown_4columns">
<div class="col_4">
<h2>Ganti dengan heading title</h2></div>
<div class="col_1">
<h3>Tutorial</h3>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
</ul></div>

<div class="col_1">
<h3>Software</h3>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CorelDraw</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">NetBeans</a></li>
<li><a href="#">XAMPP</a></li>
</ul></div>

<div class="col_1">
<h3>Game</h3>
<ul>
<li><a href="#">PES 2013</a></li>
<li><a href="#">FIFA 2013</a></li>
<li><a href="#">Need For Speed</a></li>
<li><a href="#">Call Of Dutty</a></li>
<li><a href="#">Snipper</a></li>
</ul></div>

<div class="col_1">
<h3>Lain-lain</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>
</li>

<li class="menu_right"><a href="#" class="drop">Menu 4</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CorelDraw</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Blogging</a></li>
<li><a href="#">Widget</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">Menu 3</a>
<div class="dropdown_3columns align_right">
<div class="col_3">
<h2>Kategori</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
</ul></div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Widget</a></li>
<li><a href="#">Blogging</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Tips Trik</a></li>
<li><a href="#">Tutorial</a></li>
</ul></div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Desain</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>Tutorial CSS</h2></div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwDQajn6-RLPK6fkPtlPbNJdur_X0yyTSf5NTs0GcfLA90g5hPPxSu01CLqmekBp72isVgSP5q-6Eo07s_vZroXTaPgECwV1M5lVQIe2b6ZJDq5kRZqEFCgh1fShSdLRkZnf4EHL2JYZk/s320/css-transisi.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi - Untuk lebih detailnya maka berikut adalah tutorial untuk cara membuat Efek Pull Out Gambar Dengan CSS3.<a href="#">Read more...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbOf7QQmvhRP4X-k3589_EXlHr4XSekelhRD4obWsth7pkJKghBSpCC0sAZ87JxAYE2xJGEu34V_8B7Elrp-kxPlqbzv_ZuIuDa8jkg0qREoCczxBsW0FPHvloz5tfRHpFleuIXm-CS1Q/s320/3d-flip.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Efek Gambar 3D Flip Dengan CSS – Sebuah gambar pada posting blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan murni dan tidak memiliki efek.<a href="#">Read more...</a></p>
</div></div>
</li></ul>

Keterangan:
Silahkan ganti tanda # dengan URL tujuan yang di inginkan.

Anchor teks / deskripsi silahkan ganti dengan yang di inginkan.

Langkah terakhir klik Save, maka selesai dan silahkan lihat hasilnya dari cara Membuat Mega Menu Drop Down CSS3 di Blog.