Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Mega Menu Drop Down CSS3 di Blog

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).
Mega Menu Drop Down CSS3 di Blog
#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("http://2.bp.blogspot.com/-E5s6curvzGc/UdDI0IerUDI/AAAAAAAAFd0/gnsq72eJGcw/s12/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("http://2.bp.blogspot.com/-E5s6curvzGc/UdDI0IerUDI/AAAAAAAAFd0/gnsq72eJGcw/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="http://2.bp.blogspot.com/-Va_ceju7yGA/UdDI0CH7ETI/AAAAAAAAFdo/Yj_c75zR-CA/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="http://3.bp.blogspot.com/-2-yGGI2Nrmw/UWCAzSc12vI/AAAAAAAAEBI/RKEUU3bZfzM/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="http://2.bp.blogspot.com/-i1_8cZKnxMU/UXOs5qcqwnI/AAAAAAAAEFU/xOyCuOAIk8Q/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="http://2.bp.blogspot.com/-i1_8cZKnxMU/UXOs5qcqwnI/AAAAAAAAEFU/xOyCuOAIk8Q/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="http://3.bp.blogspot.com/-2-yGGI2Nrmw/UWCAzSc12vI/AAAAAAAAEBI/RKEUU3bZfzM/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.

Berlangganan artikel via email

27 Response to "Membuat Mega Menu Drop Down CSS3 di Blog"

keren nih menu drop downnya... bikin berat gak kalau dikasih itu?

Balas

keren banget mas, tp saya pingin recent comment dropdown biar hemat tempat. caranya gmn yah?

Balas

wow mega menu, bisa meringkas halaman blog dalam suatu menu, keren banget mas tutorialnya mas, izin sedot dulu ya mas, mw nyoba, terima kasih

Balas

keren sih mas drop down nya , mau dong ajarin bisa seperti itu mas bkin nya gimana ? :( pengn bkin anu sendiri :D

Balas

Animasi yg ada di tas mantap, tapi ane masih setia dgn drop down punya ane. hehehe

Balas

jawabannya kalo udah dicoba gan :)

Balas

recent komen dropdown gimana maksudnya mbak? recent komen dimasukin kedalam dropdown gitu ya

Balas

silahkan sedot mas :)

Balas

bikinnya kayak anu diatas mas :)

Balas

bagus kalo gitu gan, tetap setia dan berpegang teguh :)
tapi si teguh lari kalo di pegang2 anunya.
hohoho

Balas

agak susah yak mas br, aq dulu pakenya online sih.
tapi enakan nggak pake menu drop down sekarang.


btw, ada info nih.
ikutan kacamata gratis di blog ane yuk
mohon bantuannya yak mas bro :D

Balas

makin keren2 ya mas...btw ini support buat semua jenis template ya mas :)

Balas

makin mantab saja sobat,posting-postingnya,saya bookmark dulu ya

Balas

wah keren tampilannya, tpi saya udah punya style dropdown sendiri hehe

Balas
avatar
Anonymous

kan itu mas yg bkin , ada software nya kah mas ?

Balas

kayak biasa mas softwarenya, dreamweaver bisa notepad++ juga bisa. tapi saya lebih suka pake notepad++

Balas

waw keren abis sob, menu dapat sekalian berisi sumary conten maupun tag.
pengunjung akan semakin mudah karena tanpa klik menu sudah bisa mengetahui
apa kira2 isi dari artikel. nice share sob

Balas

wah keren banget mas makasih infonya

Balas

kren banget, blog jadi ga kaku. pasti pengunjung juga betah berlama2 hehehe.

Balas

bagus, sudah saya coba (di blog satunya) tetapi masih gres belum saya otak_atik. izin copas dan terima kasih

Balas

masih harus belajar lagi nih :)

Balas

Keren gan,, tutorian nya,,, bagus untuk para pemula seperti saya,, Selain Home atau beranda,, halaman yang bisa lebih pada 1 postingan ada ga gan,,, lihat blog saya gan http://nadasyahreza.blogspot.com
saya baru belajar,,.,

Balas

maksudnya yang bisa nampilin artikel lebih dari satu judul gitu ya mas. misal seperti SITEMAP, dll pada menu utama blog yang diatas gitu maksudnya ya.

Balas

terimakasih untuk kawan semua atas kunjungan dan partisipasinya.
salam satu untuk semua :) sukses selalu buat sahabat2ku..

Balas

keren gan,. mau pasang yang bgini terlalu rame kyaknya.. :D
ow ya klo untuk mega menu seperti related artikel with thumb itu gimana ya..?
nyari2 belom ketemu yang pas.. pengennya kyak di abaut dot com

Balas

ini yang aku cari,... boleh tanya mas,, kalok maw buat 1 menu saja menggunakan mega drop down, gimana ya mas.. terima kasih?

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Mega Menu Drop Down CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode