Cara Menciptakan Sajian Dropdown Dengan Css Di Blog

Cara Membuat Menu Dropdown dengan CSS di Blog - Menu, khususnya sajian dropdown sangat mempunyai kegunaan untuk pengujung dalam menavigasi blog. Setiap blog perlu memasang sajian ini biar blog tetap seo friendly. Apalagi jikalau di lengkapi dengan dropdownnya. Terutama untuk blog dengan konten beragam.

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

Selain itu, pemasangan sajian dropdown ini juga akan mempunyai kegunaan dalam upaya menurunkan persentase bounce rate yang tinggi di blog, lebih-lebih jikalau setiap submenu eksklusif menuju ke artikel tertentu.

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

Membuat Menubar Multi Dropdown Sederhana di Blog

1. Setelah masuk ke pengeditan HTML template blog, kopi instruksi di bawah ini, kemudian letakkan di bawah instruksi <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 yaitu instruksi pemanggil sajian dropdown, silahkan edit link dan title yang ada pada instruksi tersebut sesuaikan dengan blog anda, kemudian di atas atau di bawah header blog anda.

<!-- Start sajian multi dropdown--> <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> <!-- End sajian multi dropdown -->

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

Demikian caranya menciptakan sajian multi dropdown dengan pure memakai css untuk blogger. Semoga berhasil mencobanya.

• DEMO

Share this post