Home »
Blogger
» Cara Membuat Menu Mega Dropdown Horizontal Di Blog
Cara Membuat Menu Mega Dropdown Horizontal Di Blog
Penulis coxelgokil pada Minggu, 24 November 2013 jam 20.09
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 OriginalnyaDISINI
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.
Contoh Kode HTML kurang lebih sebagai berikut :
HTML :
<div id="menu">
<li><ahref="#"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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7oEb4BjTP1JfeAkgSCdQNInGgHqt4JAfqAx3ook8KYotzllgIWCuFq4WC1Cd7TBSgI-Sb3AV3vI8Ft2EKfiUPUiLvk16n3OyOUEukbpn56P4K4zj5Tek_OHzyiPSLnIVdx4V2kKQ5W0Q/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.
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 :
Cara Pasang Menu Mega Dropdown di Blogger
MasukBlogger > 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 :
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 :
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.
Anda telah membaca
artikel tentang : Cara Membuat Menu Mega Dropdown Horizontal Di Blog. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
Anda telah membaca
artikel tentang : Cara Membuat Menu Mega Dropdown Horizontal Di Blog. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
