Mega Menu Dropdown Super blue

M

emodifikasi menu memang banyak cara yang dapat kita lakukan salah satunya dengan cara membuat menu bertingkat atau biasa kita kenal dengan nama menu Dropdown.dan karena bentuk menunya berwarna biru maka saya beri nama Mega Menu Dropdown Super blue ,makanya saya saranin jika sobat akan pasang menu ini di blog sobat sesuaikan saja namanya dengan warna menu yang sobat kehendaki.untuk melihat screenshotnya silahkan lihat aja contoh gambar di samping kiri postingan atau langsung aja menuju ke blog DEMOnya http://jsfiddle.net .Nah buat sobat yang ingin pasang Menu Dropdown Super Blue ini di blog sobat silahkan ikuti tutorial nya secara lengkap.

1. Cari kode ]]></b:skin> lalu pasang kode css berikut tepat diatas nya:

   #toppic {
       width: 980px;
       height: 37px;
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8K11y2dg0XTDqEKZWc9dzjK2Bk6Vt-L49lbmQPsCpLd3fEhEi2-o-JRYh0vgHSuosCO-YJ-LX5SJvpwxeURPQqPck0U3msL2b-4pdwxU2XuNoDjzUBq2hahse6f2KD5JrcyOjBNx9yVE/s320/mega-dropdown.gif) repeat-x top;
       border-bottom: 1px solid blue;
       border-top: 1px solid blue;
       margin: 0 auto;
       padding: 0 auto;
       overflow: hidden;
       text-shadow: 1px 1px 2px #260600;
   }
   
   #topwrapper {
       width: 980px;
       height: 40px;
       margin: 0 auto;
       padding: 0 auto;
   }
   
   #top {
       width: 100%;
   }
   
   #top, #top ul {
       padding: 0;
       margin: 0;
       list-style: none;
   }
   
   #top a {
       border-right: 1px solid blue;
       text-align: left;
       display: block;
       text-decoration: none;
       padding: 10px 12px 11px;
       font: bold 14px Arial;
       text-transform: none;
       color: #eee;
   }
   
   #top a:hover {
       background: blue;
       color: #02f0ff;
   }
   
   #top a.trigger {
       background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM7z7guRu-nqgJmKFcSiUl3Ap1LQIMHNtPOIDMfS4dlugnYJ95qRit5KAxhLvrNHb1o5hOhlzS_xWW_kNN3FM-FYCa5u2rmHybi1UbNwZCvGjVUAp-WQxt3hqiMlyGHwNeP3vf4c1aZZY/s1600/arrow_white.gif);
       background-repeat: no-repeat;
       padding: 10px 24px 11px 12px;
       background-position: right center;
   }
   
   #top a.babel {
       border-right: none;
       background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimuT4f_7_Uv5q0zKqiGM7EVHtsrYXrOCrA11_tolC-WAA2qI4KlfpcnU0yte7jqEpAe3bXXTKNie1dM7MRPgmubAS1guz8pVPxJ8SMKaN7cQsr2DMKpa4Lm8y-Qr2nKyvyrl6OlW314H8f/s1600/forum.gif);
       background-repeat: no-repeat;
       padding: 10px 25px 11px 12px;
       background-position: right center;
   }
   
   #top a.canal{
       border-right: none;
       background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs4tKqwNOc_DF6XL4PbkcKTs_TLEHi0Wy1Sg-NN561trslrybFJW7G87HpbttFeMTBHbQuxPWBrrqlZYY6WYMcjvy3w2KW1rYBoTF4rEHJi7ETnzUaNS42Qi3dnMufONaXPsmPP-du7T7Q/s1600/index3.png);
       background-repeat: no-repeat;
       padding: 10px 22px 11px 12px;
       background-position: right center;
   }
   
   #top li {
       float: left;
       position: relative;
   }
   
   #top li {
       position: static;
       width: auto;
   }
   
   #top li ul, #top ul li {
       width: 300px;
   }
   
   #top ul li a {
       text-align: left;
       padding: 6px 15px;
       font-size: 13px;
       font-weight: normal;
       text-transform: none;
       font-family: Arial, sans-serif;
       border: none;
   }
   
   #top li ul {
       z-index: 100;
       position: absolute;
       display: none;
       background-color: blue;
       margin-left: -80px;
       padding: 10px 0;
       -moz-border-radius-bottomleft: 6px;
       -moz-border-radius-bottomright: 6px;
       -webkit-border-bottom-left-radius: 6px;
       -webkit-border-bottom-right-radius: 6px;
       border-bottom-left-radius: 6px;
       border-bottom-right-radius: 6px;
       -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
       -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
       filter: alpha(opacity=87);
       -moz-opacity: .90;
       opacity: .90;
   }
   
   #top li ul li {
       width: 150px;
       float: left;
       margin: 0;
       padding: 0;
   }
   
   #top li:hover ul, #top li.hvr ul {
       display: block;
   }
   
   #top li:hover ul a, #top li.hvr ul a {
       color: #ddd;
       background-color: transparent;
       text-decoration: none;
   }
   #top ul a:hover {
       text-decoration: underline!important;color:red;
   }

2. Untuk Pemanggilan kode Html nya gunakan Ctrl+ F cari kode <div id='header-wrapper'> lalu taruh kode tepat di bawah kode <div id='header-wrapper'> tepat nya setelah tag penutup </div>

   <div id="toppic">
   <div id="topwrapper">
   <ul id="top">
   <li class="home">
   <a href="#" title="Home">HOME</a>
   </li>
   <li>
   <a class="trigger" href="#" title="Kumpulan Trik ">Kumpulan Trik</a>
   <ul>
   <li>
   <a href="#" title="tutorial">Tutorial</a>
   </li>
   <li>
   <a href="#" title="label">Widget</a>
   </li>
   <li>
   <a href="#" title="template">Template</a>
   </li>
   <li>
   <a href="#" title="seo">SEO</a>
   </li>
   <li>
   <a href="#" title="Tool">Tool</a>
   </li>
   <li>
   <a href="#" title="widget">Widget</a>
   </li>
   <li>
   <a href="#" title="Free Download">Download</a>
   </li>
   <li>
   <a href="#" title="kode warna">Kode Warna</a>
   </li>
   </ul>
   </li>
   <li>
   <a class="trigger" href="#" title="Ilmu Pertanian">Ilmu Pertanian</a>
   <ul>
   <li>
   <a href="#" title="Info Music">Info music</a>
   </li>
   <li>
   <a href="#" title="biodata">Biodata</a>
   </li>
   <li>
   <a href="#" title="Free ">Free Mp3</a>
   </li>
   <li>
   <a href="#" title="Penyakit">Penyakit</a>
   </li>
   <li>
   <a href="#" title="Tanaman">Tanaman</a>
   </li>
   <li>
   <a href="#" title="organik">Organik</a>
   </li>
   </ul>
   </li>
   <li>
   <a href="#" title="Sofwere ">Software</a>
   </li>
   <li>
   <a href="#" title="Puisi">Puisi</a>
   </li>
   <li>
   <a href="#" title="kontes">Kontes</a>
   </li>
   <li>
   <a href="#" title="movie">Movies</a>
   </li>
   <li>
   <a href="http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxxxx" title="follow me">Follow +</a>
   </li>
   <li>
   <a class="babel" href="#" title="forum">Forum</a>
   </li>
   <li>
   <a class="canal" href="#" title="index">Indeks</a>
   </li>
   </ul>
   </div>
   </div>

Mengingat Setiap template memiliki bentuk code yang berbeda maka saya sarankan jika sobat kesulitan untuk memasang kode HTML nya silahkan langsung tanyakan di form Komentar

Judul Artikel :Mega Menu Dropdown Super blue

Terima Kasih Sobat sudah membaca Artikel saya Tentang Mega Menu Dropdown Super blue Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih