Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

Cara Membuat Menu Mega Dropdown Horizontal Keren

Desain Blog kali ini akan membagi tutorial cara membuat Menu Navigasi Mega Dropdown keren dengan CSS pada Blogger, yang dapat digunakan untuk berbagai macam kebutuhan website/blog. Menu Mega Dropdown Horizontal ini umumnya digunakan pada komersial website atau juga pada website berskala besar, namun sekarang Anda dapat menikmati menu mega dengan css tersebut di blog Anda. Menggunakan menu mega dropdown dapat juga dijadikan solusi efektif bagi yang ingin menampilkan konten blog yang banyak sekaligus juga menjaga tampilan blog tetap bersih.

Pada awalnya Menu Mega Dropdown yang didesain oleh net.tutsplus.com untuk tujuan komersial, namun akhirnya juga dibagikan versi free-nya yang secara apik dan detail dijelaskan dalam tutorial mega menu di website-nya. Timbul keinginan saya mencoba menerapkan menu navigasi mega dropdown tersebut di blog saya waktu itu, akan tetapi hasil tampilan menu kurang cocok saat itu. Oleh karena itu saya membuat beberapa modifikasi pada kode CSS maupun HTML, agar benar-benar sesuai dengan karakter blog, khusunya blogspot.

Menu Mega Dropdown pada kode CSS original-nya dibuat dengan Drop Down Container yang diberi background image PNG (juga scirpt behavior untuk handle cross-browser compatibility, khususnya IE 6), saya tidak lagi, hanya menggunakan background-color dengan gradient (juga belum support di IE), tapi bekerja dengan baik di browser seperti Chrome, Firefox dan Opera (di-IE 9 hanya gradient-color tidak berfungsi). Pada beberapa code CSS, saya juga mengganti properti dari kolom-kolom pada drop down agar sesuai dengan kebutuhan blog, posisi penempatan kolom dan posisi Drop Down Container (Aligning to the Right dan Aligning to the Left).

Lebih baik Anda langsung lihat DEMO Menu Mega Dropdown versi Originalnya DISINI
Dan untuk melihat code sources versi Orignalnya, Anda bisa kunjungi websitenya DISINI

Khusus kode HTML dan isi menu kontainer (seperti menu font, h2, paragraf) sebagian besar telah saya rubah, menyesuaikan blog saya tentunya. Anda juga dapat meng-edit-nya kembali sesuka dan sesuai kebutuhan blog masing-masing nantinya. Silahkan lihat Demo Live Versi Modif-nya dibawah ini:


Contoh Kode HTML yang saya gunakan kurang lebih sebagai berikut :
HTML code:
<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>Hi and welcome here ! Selamat datang di situs Blog Anda</p> <p><b>Sebuah Blog tentang....</b> </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="browser support" title="browser utama" /> </div> <div class="col_1"> <p>Gunakan <b>Chrome</b> atau Mozilla Firewok untuk tampilan Blog yang lebih optimal</p> </div> </div><!-- End 2 columns container --> </li><!-- End Home Item --> <li><a href="#" class="drop">Tutorials</a><!-- Begin 3 columns Item --> <div class="dropdown_3columns"><!-- Begin 3 columns container --> <div class="col_3"> <h2>Tutorials on Blog</h2> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">TutorialBlogger</a></li> <li><a href="#">Tutorial SEO</a></li> <li class='has-sub '><a href="#">Desain Blog</a> <ul> <li><a href='#><span>CSS3</span></a></li> <li><a href='#'><span>jQuery</span></a></li> <li><a href='#'><span>Javascript</span></a></li> </ul> </li> </ul> </div> </div><!-- End 3 columns container --> </li><!-- End 3 columns Item --> <li><a href="#" class="drop">Blogger Template</a><!-- Begin 3 columns Item --> <div class="dropdown_4columns"><!-- Begin 4 columns container --> <div class="col_4"> <h2>Menu Blogger Templates</h2> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">1 Column</a></li> <li><a href="#">2 Columns</a></li> <li><a href="#">3 Columns</a></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">Best Blogger Template</a></li> <li><a href="#">Etnik Blogger Template</a></li> </ul></div> </div><!-- End 3 columns container --> </li><!-- End 3 columns Item --> <li><a href="#" class="drop">Making Money</a><!-- Begin 3 columns Item --> <div class="dropdown_3columns "><!-- Begin 3 columns container --> <div class="col_3"> <h2>Ads for Blogger</h2> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">Google AdSense</a></li> <li><a href="#">KlikSaya.com</a></li> </ul> </div> </div><!-- End 3 columns container --> </li><!-- End 3 columns Item --> <li><a href="#" class="drop">Blog Tools</a><!-- Begin 3 columns Item --> <div class="dropdown_3columns align_right"><!-- Begin 3 columns container --> <div class="col_3"> <h2>Usefull Tools</h2> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">Kode Warna HTML</a></li> <li><a href="#">Parse Kode HTML</a></li> </ul> </div> </div><!-- End 3 columns container --> </li><!-- End 3 columns Item --> <li><a href="#" class="drop">Internet & Tech</a><!-- Begin 3 columns Item --> <div class="dropdown_4columns align_right"><!-- Begin 3 columns container --> <div class="col_4"> <h2>Internet & Tech List</h2> </div> <div class="col_1"> <ul> <li><a href="#">info Komputer</a></li> <li><a href="#">Laptop</a></li> <li><a href="#">info Software</a></li> </ul> </div> <div class="col_1"> <ul> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> </ul> </div> <div class="col_1"> <ul> <li><a href="#">Download Gratis</a></li> <li><a href="#">Network Social</a></li> </ul> </div> <div class="col_1"> <ul> <li><a href='#'>Info&News</a></li> <li><a href='#'>Kesehatan</a></li> </ul> </div></div></li> <!-- End 3 columns container --> <!-- End 3 columns Item --> <li><a href="#" class="drop">Link Exchange</a><!-- Begin Home Item --> <div class="dropdown_2columns align_right"><!-- Begin 2 columns container --> <div class="col_2"> <h2>Tukar Link Yuk !!!</h2> </div> <div class="col_2"> <p>Bagi Anda yang ingin saling tukar link silahkan pasang link blog ini di blog Anda, dan link blog Anda akan terpasang di blog ini.</p> </div> <div class="col_2"> <h2>Link Banner Blog</h2> </div> <div class="col_1"> <a href="url Banner Blog Anda" width="150" height="50" /></a><br /> <p>Klik untuk <a href="#" target="_blank">TUKAR LINK</a></p> </div> </div><!-- End 2 columns container --> </li><!-- End Home Item -->
Anda bisa mengedit item-item menu navigasi dan kalimat pada menu nav sesuai keinginan:
  • Menu item code yang berwarna merah adalah item-item navigasinya
  • Code yang berwarna ungu adalah url gambar cross browser dan banner blog
  • Adapun kalimat yang berupa pargaraf dan h2 (warna hitam), sesuaikan dengan blog Anda
  • Code yang berwarna biru adalah sub menu


Kode CSS yang saya gunakan seperti ini :
CSS code:
<style type="text/css"> body, ul, li { font-size:13px; font-family:Georgia, Helvetica, sans-serif; line-height:20px; text-align:left; } /* Navigation Bar */ #menu { list-style:none; width:100%; margin:0px auto 0px auto; height:40px; padding:0px ; /* 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: 2px 10px 4px 10px; margin-right:10px; margin-top:7px; border:none; } #menu li:hover { border: 1px solid #4D8FAE; padding: 4px 9px 4px 9px; /* 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:georgia, Helvetica, sans-serif; font-size:10px; display:block; outline:0; text-decoration:none;text-transform: uppercase; text-shadow: 1px 1px 3px #366479, -1px -1px 3px #3464AB, 1px 1px #3464AB, -1px -1px #366479; span :line-height:1em; font-size:0,5em; font-weight:bold; color:#B3E4E4; } #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 #014464; border-top:none; /* Gradient background */ background:#014464; background: -moz-linear-gradient(top, #014464, white); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#014464), to(white)); /* 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: 170px;} .dropdown_4columns {width: 300px;} .dropdown_5columns {width: 420px;} #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:160px;} .col_4 {width:300px;} .col_5 {width:410px;} /* Right alignment */ #menu .menu_right { float:right; 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 h2, #menu h3, #menu div li { font-family:georgia, Helvetica, sans-serif; line-height:21px; font-size:12px; text-align:left; color:#5BAB70; text-shadow: 1px 0px 1px black } #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 { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; margin:0 0 10px 0; color: #331111; } #menu li:hover div a { font-weight: normal; font-size:11px; color:black; } #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 { line-height:15px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:auto; } #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:120px; /* 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>
  • Lebar body menu ini saya buat  100%, Anda bisa merubahnya dengan edit code width:100%sesuai lebar blog (lebar header-wrapper atau container-wrapper)
  • Yang lain pada CSS diatas seperti warna, jenis font, ukuran font, style font, background color, ukuran column dan border, dst. jika mau Anda bisa memodifikasi sendiri sesuai selera Anda


Sehingga kalau digabungkan kode HTML dan CSS diatas akan menghasilkan Menu Navigasi Mega Dropdown Keren seperti ini :


 Menu Navigasi Mega Dropdown

Cara Pasang Menu Mega Dropdown di Blogger

  • Masuk Blogger > pilih Tata Letak
  • Klik Add a Gadget atau Add a Page element
  • Pilih HTML/JavaScript widget
  • Paste semua kode Menu Mega Drop Down tersebut (kode CSS + HTML) dalam HTML/JavaScript widget
  • Klik Save
  • Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan tepat dibawah header / judul Blog. lihat gambar dibawah :

Add HTML/JavaScript widget
Jika Anda ingin menambah atau mengurangi menu tab, maka dengan mudah bisa ditambah atau di-delete / hapus line kode html tersebut :

<li><a href="#" ><span>Nama Item</span></a></li>

Selesai!! Anda sekarang menggunakan Menu Mega Dropdown Horizontal Keren di blog Anda, silahkan modifikasi atau menambah sekedar ucapan "Selamat Datang" di Item Navigasi Home, atau menambah gambar banner blog Anda tentu lebih mempercantik dan profesional menu mega dropdown ini. Seperti contoh screenshot ini :

Welcome statement
screenshot 1

Container with banner image
screenshot 2
Ok Kawan, mudah-mudahan Anda suka tutorial menu mega dropdown ini dan dapat membuat blog Anda semua lebih menarik dan fungsional. Jangan segan untuk bertanya jika Anda mengalami masalah berkaitan menu dropdown ini, saya akan membantunya sebisa mungkin.

Enjoy it!! Now

Mungkin Ini Yang Anda Cari Juga:
  1. 10 Drop Down Menu Keren Pure CSS
  2. Menu Navigasi Horizontal Keren Bag. I
  3. Koleksi Menu Navigasi Horizontal Keren Bag. II
  4. Menu Navigasi Horizontal Keren Bag. III
  5. Menu Navigasi dengan Efek Hover Transisi
  6. Menu Navigasi Horizontal Efek Lavalamp ( jQuery Gooey )

Artikel Terkait Lainnya:
Click here for comments

27 komentar

baru tahu nih caranya eeheheh makasih ya

REPLY

siplah, udh lama mo share baru sempat nih:)

REPLY

pas jalan2,tiba-tiba pngen mampir disini,,,eeehh kebetulan ada yg baru,terus sy baca dehh,,hee
oke sob,,lumayan jd tambah ilmu,,
nice share sobb...

REPLY

mas di blog saya kok tidak bisa rata kiri kanan ya, bagamana meratakanya dan caranya merubah warna. maklum mas saya newbi?

REPLY

coba kang rubah width:jadi 100%
di pasang di bawah header, ada header wrapper? jangan diatas main post
untuk rubah warna menu cari kode #014464
atur sesuai lebar blod Anda atau buat header-wrapper

REPLY

kode CSS-nya dipasang dimana gan ...? maklum masih newbie

REPLY

di widget/gadget mas
anda ke tata letak> pilih add gadget> pilih add html javascript
seperti contoh diatas

REPLY

Keren Sob widgetnya,
Thanks yah infonya,,,

REPLY

Cara biar nav barnya bisa dislide kebawah gimana ? kaaf newbi

REPLY

makasih..
biar navigasinya tetap diatas, dan tidak ikut ketutup gimana??

REPLY

Thanks sob..
Oya, sekalian mau tanya. Bagaimana cara membuat ISI halaman link pada saat kita membuka menu pilihan itu ??
Contohnya :
Dari http://problogiz.blogspot.com
Menjadi http://problogiz.blogspot.com/2013/01/menu-navigasi-mega-dropdown-keren.html

Tolong bantuannya ya sob

REPLY

saya coba di blog, gak ada sub menu turunannya sesuai html yg dicopas...
yg muncul hanya 1 baris, coba di lihat blognya

mis: pada menu "blogger template"
sub menunya
1 Column
2 Columns
3 Columns

harusnya 3 baris , yg muncul hanya 1 baris
tlg solusinya mas....

REPLY

Menu mega dropdown nya keren gan... ma kasih aku coba juga

REPLY

Menu mega dropdown nya keren gan... ma kasih aku coba juga

REPLY

Trims Mas. Selanjutnya untuk mengisi masing-masing sub menu dengan artikel gmn caranya Mas? Bisa minta contoh! Semoga berkenan memberi jawaban, Trims.

REPLY

hatur nuhun pisan infona

REPLY

Mas mau tambahkan menu search pencarian gimana ya

REPLY

kalau cara pasang di script themenya langsung gmn, gan.. saya coba2 kok cm sukses di Home-nya aja, sementara setelah masuk post sm page gak sukses alias kocar kacir..
Mohon pencerahannya

REPLY

Arya...klo mo pasang ditemplate cssnya di atas ]]></b:skin>, nah klo htmlnya ini yg beda-beda strukurnya setiap template, biasanya dbagian header-wrapper atau tepat dibagian. bawah kode <body>, .lebih baik Anda beri url blognya lebih jelas nti...

REPLY

terimakasih banyak sob, sangat membantu sekali tutornya..

http://cv-pengobatan.com/pengobatan-alami-kanker-usus/

REPLY

kalau mau pasang foto di menu caranya gimana kang? terima kasih

REPLY

mas, nanya..

cool dm tk a

>>jadwal cool>> rmh mess
>>jadwal cool> rmh beny (ini gmana coding 'rmh beny' nya)

>>Felowship> Puncak mas (ini gmana coding 'Puncak mas' nya)

terima kasih.

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|