Membuat Menu Drop Down Di Blogspot

Menu Dropdown - Chast Media - Blogger Tutorial.
Drop Down Menu atau Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain.
Menu dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau bisa juga untuk meringkas artikle yang terkait yang di masukan ke menubar tersebut. jika ingin menerapkan menubar ini di blog.
Silahkan ikuti tutorialnya.

Menu Bar Multi Dropdown Versi 1
1. Buka akun blogger anda.
2. Pilih menu template > klik Edit Html
3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>

KODE :

 nav {
    display: block;
    margin-top: 100px;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #9ca3da;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #9ca3da;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #9ca3da;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #9ca3da;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

4. Selanjutnya letakan kode html di bawah ini tepat di bawah kode </header>

KODE :

 <nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> 
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li> 
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li>
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li>
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li>
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li>
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav>

5. Langkah terakhir simpan kode di bawah ini tepat di atas kode </body>

KODE :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#resp-menu');
 var menu  = $('.menu');

 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });

 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });

});
//]]>
</script>

6. Silahkan klik pertinjau terlebih dahulu,kalo sudah sesuai, save template.

---------------------

Menu Bar Multi Dropdown Versi 2
1. Letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

KODE :

#menutop ul,
#menutop li,
#menutop span,
#menutop a {
  margin: 0;
  padding: 0;
  position: relative;
}
#menutop {
  height: 49px;
  background: #D5D5D5;
  border-bottom: 4px solid #59c5ff;
  width: auto;
}
#menutop:after,
#menutop ul:after {
  content: '';
  display: block;
  clear: both;
}
#menutop a {
  background: #D5D5D5;
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#menutop ul {
  list-style: none;
}
#menutop > ul,#menutop > ul > li {
  float: left;
}
#menutop > ul > li > a {
  color: #000;
  font-size: 12px;
}
#menutop > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
  background: #ececec;
}
#menutop .menu-sub {
  z-index: 1;
}
#menutop .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#menutop .menu-sub ul li {
  margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
  background: #59c5ff;
  border-bottom: 1px solid #8cd7ff;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
  background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub .menu-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
  background: #26b3ff;
  border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
  background: #0daaff;
}

2. Selanjutnya letakan kode HTML di bawah ini tepat di bawah kode </header>

KODE :

 <div id='menutop'>
<ul>
   <li class='active'><a href='/' target='_blank'><span>Home</span></a></li>
   <li class='menu-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
       <li class='menu-sub'><a href='#'><span>More Menu</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>More Menu 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Menu 1</span></a></li>
               <li class='last'><a href='#'><span>Sub Menu 2</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>More Menu 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>

3. Save Template.

---------------------

Menu Bar Multi Dropdown Versi 3
1. Masuk ke akun blogger.
2. Klik Layout atau tata letak.
3. Klik Add a Gadget atau tambahkan gadget.
a. Pilih HTML/Javascript, kemudian masukkan kode berikut ini.
b. Saat menambahkan gadget posisikan di bawah header.
c. Copy Code Script di Bawah ini

KODE :

<style>
        #menunavigasihorisontal {
            background: #848484;
            width: 100%;
            color: #FFF;
                margin: 10px 0;
                padding: 0;
                position: relative;
                border-top:0px solid #960100;
                height:35px; }
        #bb2nav {
            margin: 0;
            padding: 0;}
        #bb2nav ul {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;}
        #bb2navli {
            list-style: none;
            margin: 0;
            padding: 0;}
        #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
            color: #FFF;
            display: block;
           font:bold 12px Helvetica, sans-serif;
           margin: 0;
            padding: 9px 12px 11px 12px;
                text-decoration: none;
                border-right:0px solid #627AAD;}
        #bb2nav li a:hover, #bb2nav li a:active {
            background: #2E9AFE;
            color: #FFF;
            display: block;
            text-decoration: none;
                margin: 0;
            padding: 9px 12px 11px 12px;}
        #bb2nav li {
            float: left;
            padding: 0;}
        #bb2nav li ul {
            z-index: 9999;
            position: absolute;
            left: -999em;
            height: auto;
            width: 160px;
            margin: 0;
            padding: 0;}
        #bb2nav li ul a {
            width: 140px;}
        #bb2nav li ul ul {
            margin: -25px 0 0 161px;}
        #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
    li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
            left: -999em;}
        #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
    li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
    li li li.sfhover ul {
            left: auto;}
        #bb2nav li:hover, #bb2nav li.sfhover {
            position: static;}
        #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
            background: #EDEFF4;
            width: 120px;
            color: #3B5998;
            display: block;
            font:normal 12px Helvetica, sans-serif;
            margin: 1px 0 0 0;
            padding: 9px 12px 10px 12px;
                text-decoration: none;
        z-index:9999;
        border:1px solid #ddd;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;}
        #bb2nav li li a:hover, #bb2nav li li a:active {
            background: #627AAD;
            color: #FFF;
            display: block;}
        #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
    a:visited {
            background: #EDEFF4;
            width: 120px;
            color: #3B5998;
            display: block;
            font:normal 12px Helvetica, sans-serif;
            padding: 9px 12px 10px 12px;
                text-decoration: none;
        z-index:9999;
        border:1px solid #ddd;
            margin: 1px 0 0  -14px;}
        #bb2nav li li li a:hover, #bb2nav li li li a:active {
            background: #627AAD;
            color: #FFF;
            display: block;}
</style>
<div id='menunavigasihorisontal'>
    <ul id='bb2nav'>
        <li>
            <a href='URL SOBAT'>Daftar Isi</a>
        </li>
        <li>
            <a href='URL SOBAT'>Tentang Saya</a>
        </li>
        <li>
            <a href='#'>Menu ▼</a>
            <ul>
                <li>
                    <a href='URL SOBAT'>Sub Menu 1</a>
                </li>
                <li>
                    <a href='URL SOBAT'>Sub Menu 2</a>
                </li>
                <li>
                    <a href='URL SOBAT'>Sub Menu 3</a>
                    <li>
                        <a href='URL SOBAT'>Sub Menu 4</a>
                    </li>
                    <li>
                        <a href='URL SOBAT'>Sub Menu 5</a>
                    </li>
                    <li>
                        <a href='URL SOBAT'>Sub Menu 6</a>
                    </li>
                </li>
            </ul>
        </li>
    </ul>
</div>

---------------------

Menu Bar Multi Dropdown Versi 4
1. Buka akun blogger anda.
2. Pilih menu template > klik Edit Html
3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin>

KODE :

/*Chast Menu Bawah Header*/
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: #000 repeat-x;width:100%;margin:0 auto;padding:0 auto} #menuwrapper{width:100%;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#ff9900;border-right:0px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3Yd4YET7GrLM2lJogiBEEEwAX6h6JLRM88EKFt2z-6LxTzyijhrpH9i6RCVU8VExLI5lprv4cBQ5tJ3_-8X2V0QoOryE-vqSkXSeywFZKFU0iIYplszQDoGZUEWEMn5Ymynm9oel9Ns/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:

4. Letakan kode di bawah ke Layout atau Tata Letak > tambah Gadget
a. Posisikan di bawah Header

KODE :

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://chastonline.blogspot.co.id/'>HOME </a></li>
<li><a class='trigger'>CHAST SHOP</a>
<ul>
<li class='hr'/>
<li><a href='Alamat'>Semua Produk</a></li>
<li class='hr'/>
<li><a href='Alamat'>Flash Disk</a></li>
<li class='hr'/>
<li><a href='Alamat'>Perangkat Keamanan</a></li>
</li></li></li></ul>
</li>
<li><a class='trigger'>OTHERS</a>
<ul>
<li class='hr'/>
<li><a href='Alamat'>Shop</a></li>
<li class='hr'/>
<li><a href='Alamat'>Blogger</a></li>
<li class='hr'/>
<li><a href='Alamat'>Lores</a></li>
</li></li></li></ul>
</li>
<li><a href='Alamat'>CONTACT</a></li>
</ul> <div class='menusearch'>
</div></div></div>

=== CATATAN
Ganti tulisan Warna Merah dengan Alamat Anda.

* Demikian semoga bermanfaat...