Membuat menu dan sub menu pada blog

Pada kesempatan kali ini saya akan membagikan Tutorial Blog : Cara Membuat Menu Horizontal dan Sub Menu di blog sahabat blogger. Biasanya ketika kita membuat blog seo friendly di blogspot belum ada menu fitur dan submenu, itu sebabnya ada baiknya jika kita bisa membuat sendiri. Berikut adalah cara untuk membuat menu dan submenu di blog :

1. Login ke Blogger.com dan klik Template
2. Then klik Sesuaikan
3. Kemudian klik Tingkat lanjut
4. Pilih Tambahkan CSS
5. Copy kode script di bawah ini :

#DropdownMenu {
    background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXqJUDiZ_Io262KQG17yX50O09y-LffyEeU9DYasoJIumNxaDRvygairbqOlfMML_-iEPaJ08gV2oc9L1lR84DU_jycBMgL3sLTpBYsNM1i6htZ1ZRrm1xQJUMbxL_SUEtWvC_8uS3R8/h120/bg1.gif);
border-radius:6px;
    width: 808px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color:#ffffff;
    font-weight: bold;
    margin-bottom: px;
    padding: 2px;



}
#Dropdownbox {
    width: 875px;
border-radius:6px;
    float: left;
    margin: 0;
    padding: 0;
}

#strike {
border-radius:6px;
    margin: 0;
    padding: 0;
}
#strike ul {
border-radius:6px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li {
border-radius:6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:10px;
    color:#FFFFFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 1;
    padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
    background:#FFFFFF;
    color:#ff6803;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
      background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXqJUDiZ_Io262KQG17yX50O09y-LffyEeU9DYasoJIumNxaDRvygairbqOlfMML_-iEPaJ08gV2oc9L1lR84DU_jycBMgL3sLTpBYsNM1i6htZ1ZRrm1xQJUMbxL_SUEtWvC_8uS3R8/h120/bg1.gif);
    width: 150px;
    color:#FFFFFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
     background:#FFFFFF;
    color:#ff6803;
    padding: 7px 10px;
}
#strike li {
border-radius:6px;
    float: left;
    padding: 0;
}
#strike li ul {
border-radius:6px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#strike li ul a {
border-radius:6px;
    width: 140px;
}
#strike li ul ul {
border-radius:6px;
    margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
    left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
    left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
    position: static;
}



6. Kemudian pilih Terapkan ke blog
7. Jika sudah tersimpan, klik Kembali ke Blogger
8. Klik Tata Letak kemudian Tambahkan Gadget
9. Cari HTML/JavaScript

10. Pastekan scrip berikut di kolom yang sudah disediakan (Judul kosongkan saja)

<div id="DropdownMenu">
     <div id="Dropdownbox">
     <ul id="strike">
        <li><a href="http://erbesar.blogspot.com">Home</a></li>
        <li><a href="http://erbesar.blogspot.com">Menu 1</a></li>
        <li><a href="http://erbesar.blogspot.com">Menu 2</a>
          <ul>
            <li><a href="http://erbesar.blogspot.com">Sub Menu 2a</a></li>
            <li><a href="http://erbesar.blogspot.com"> SubMenu 2b</a></li>
          </ul>
        <li><a href="http://erbesar.blogspot.com">Menu 3</a>
          <ul>
            <li><a href="http://erbesar.blogspot.com">Menu 3a</a></li>
            <li><a href="http://erbesar.blogspot.com">Menu 3b</a></li>
          </ul>
        <li><a href="http://erbesar.blogspot.com">Menu 4e</a>
          <ul>
            <li><a href="http://erbesar.blogspot.com">Sub Menu 4a</a></li>
            <li><a href="http://erbesar.blogspot.com">Sub Menu 4b</a></li>
          </ul>
        <li><a href="http://erbesar.blogspot.com">Menu 5</a>
          <ul>
            <li><a href="http://erbesar.blogspot.com">Sub Menu 5a</a></li>
            <li><a href="http://erbesar.blogspot.com">Sub Menu 5b</a></li>
          </ul>
    </li></li></li></li></li></li></li></ul></div>
  </div>

Dan pilih Simpan 

Perhatian :
Ganti teks "http://erbesar.blogspot.com" dengan url anda inginkan. Dan rubahlah Menu dan Sub Menu sesuai dengan yang anda butuhkan.

Itulah cara membuat menu dan sub menu pada blog. Jika berhasil maka hasilnya akan sama dengan menu blog ini. 

Selamat Mencoba :)