Cara Membuat Menu Dropdown dengan CSS di Blog

bungfrangki Tutorial Blog Widget Cara Membuat Menu Dropdown dengan CSS di Blog

Membuat Menubar Multi Dropdown Sederhana di Blog – Menu, khususnya menu dropdown sangat berguna untuk pengujung dalam menavigasi blog. Setiap blog perlu memasang menu ini agar blog tetap seo friendly. Apalagi jika di lengkapi dengan dropdownnya. Terutama untuk blog dengan konten beragam.

Navigasi menu dropdown yang saya bagikan kali ini tidak menggunakan sentuhan JavaScript ataupun jQuery. Menu dropdown ini pure menggunakan CSS, tentu sudah divalidasi HTML5 dan CSS3. Bahkan modifikasi menu dropdown ini juga tidak menggunakan icon-icon, dengan begitu tidak perlu merasa khawatir akan loading blog jika memasangnya di blog.

Selain itu, pemasangan menu dropdown ini juga akan berguna dalam upaya menurunkan persentase bounce rate yang tinggi di blog, lebih-lebih jika setiap submenu langsung menuju ke artikel tertentu.

Baca juga: 5 Cara Tercepat Menurunkan Bounce Rate Blog

Menu dropdown ini akan efektif diletakkan di atas atau di bawah header. Namun, tidak menutup kemungkinan di tempatkan di tempat lain juga tidak lebih baik, sesuaikan dengan tata letak template anda. Jika tertarik memasang menu dropdown ini di blog, silahkan ikuti tutorialnya berikut ini.

Membuat Menu Dropdown dengan CSS di Blog

Membuat Menubar Multi Dropdown Sederhana di Blog

1. Setelah masuk ke pengeditan HTML template blog, kopi kode di bawah ini, lalu letakkan di bawah kode <style> atau <b:skin>

/* Menu Multi Dropdown */
ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#201816;width:100%}
ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#201816}
ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#CB4E48; padding:0 7px 0}
ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}
ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}
ul#mainmenu li:hover {z-index:1;}
ul#mainmenu ul ul {position:absolute;left:100%;top:0;}
ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}
* html ul#mainmenu li a {display:inline-block;}
ul#mainmenu>li {margin:0;}
ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}
ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}
ul#mainmenu ul li {float:none;margin:7px 0 0;}
ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #BE3C36;}
ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}
ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}
ul#mainmenu ul span {background-image:none; padding-right:5px;}
ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #BE3C36;}
ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#988989;}
ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#CB4E48;color:#FFFFFF;}

2. Di bawah ini adalah kode pemanggil menu dropdown, silahkan edit link dan title yang ada pada kode tersebut sesuaikan dengan blog anda, kemudian di atas atau di bawah header blog anda.

<nav>
<ul class='menutop' id='mainmenu'>
<li class='menutop'><a href='#' title='Home'>Home</a>
</li>
<li class='menutop'><a href='#' title='Product Info'>Product info</a>
<ul>
<li><a href='#'>Features</a>
</li>
<li><a href='#' title='Installation'>Installation</a>
<ul>
<li><a href='#'>Description of files</a>
</li>
<li><a href='#'>How to setup</a>
</li>
</ul>
</li>
<li><a href='#'>Parameters info</a>
</li>
<li><a href='#' title='Supported browsers'>Supported browsers</a>
<ul>
<li><a href='#'>Firefox</a>
</li>
<li><a href='#'>Internet Explorer</a>
</li>
<li><a href='#'>Opera</a>
</li>
<li><a href='#'>Safari</a>
</li>
<li><a href='#'>Google Chrome</a>
</li>
</ul>
</li>
<li><a href='#'>CSS3 info</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Samples'>Samples</a>
<ul>
<li><a href='#'>Android template</a>
</li>
<li><a href='#'>Mac template</a>
</li>
<li><a href='#' title='Mercury template'>Mercury template</a>
<ul>
<li><a href='#'>Blue theme</a>
</li>
<li><a href='#'>Green theme</a>
</li>
<li><a href='#'>Lilac theme</a>
</li>
<li><a href='#'>Orange theme</a>
</li>
</ul>
</li>
<li><a href='#'>Elegant template</a>
</li>
<li><a href='#' title='Poin Template'>Point template</a>
<ul>
<li><a href='#'>Aquamarine theme</a>
</li>
<li><a href='#'>Blue theme</a>
</li>
<li><a href='#'>Green theme</a>
</li>
<li><a href='#'>Grey theme</a>
</li>
<li><a href='#'>Orange theme</a>
</li>
<li><a href='#'>Red theme</a>
</li>
</ul>
</li>
<li><a href='#' title='Toolbars template'>Toolbars template</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
<ul>
<li><a href='#'>Firefox</a>
</li>
<li><a href='#'>Internet Explorer</a>
</li>
<li><a href='#'>Opera</a>
</li>
<li><a href='#'>Safari</a>
</li>
<li><a href='#'>Google Chrome</a>
</li>
</ul>
</li>
</ul>
</nav>

3. Jika semua telah rampung disesuaikan dengan blog anda, simpan template anda.

Demikian caranya membuat menu multi dropdown dengan pure menggunakan css untuk blogger. Semoga berhasil mencobanya. Thanks to: Lalu Abd.Rahman – Jelasinblog & css3menu(dot)com.