Cara membuat menu dropdown pada blogspot

Menambahkan menu dropdown adalah salah satu cara dalam mengelola link-link penting blog/situs anda. Dan hal ini juga akan membantu memudahkan menavigasi para pembaca/pengunjung blog yang nanti pastinya akan meningkatkan site page views (jumlah halaman situs yg dilihat).

Dalam pembuatan menu dropdown ini dilakukan dengan 2 (dua) tahap, yaitu :

1. mengedit HTML pada Template blog
2. menambahkan widget baru

OK, mari beraksi . . .

Tahap 1

• Login ke blogger
• masuk ke Dashboard 
• klik Template > edit HTML (untuk jaga-jaga, backup dulu template nya ! lihat disini)
• gunakan Ctrl+F dan temukan ]]></b:skin>
• copy kode dibawah ini 

/*----- Drop Down Menu by www.abimalkanotes.blogspot.com----*/

#abnnavbar {
    background: #2a2626;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #7f7777;
        height:35px;
}

#abnnav {
    margin: 0;
    padding: 0;
}
#abnnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#abnnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#abnnav li a, #abnnav li a:link, #abnnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#abnnav li a:hover, #abnnav li a:active {
    background: #6c6464;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#abnnav li {
    float: left;
    padding: 0;
}
#abnnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#abnnav li ul a {
    width: 140px;
}
#abnnav li ul ul {
    margin: -25px 0 0 161px;
}
#abnnav li:hover ul ul, #abnnav li:hover ul ul ul, #abnnav li.sfhover ul ul, #abnnav li.sfhover ul ul ul {
    left: -999em;
}
#abnnav li:hover ul, #abnnav li li:hover ul, #abnnav li li li:hover ul, #abnnav li.sfhover ul, #abnnav li li.sfhover ul, #abnnav li li li.sfhover ul {
    left: auto;
}
#abnnav li:hover, #abnnav li.sfhover {
    position: static;
}
#abnnav li li a, #abnnav li li a:link, #abnnav li li a:visited {
    background: #6c6464;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
   
}
#abnnav li li a:hover, #abnnavli li a:active {
    background: #2a2626;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

abimalkanotes

• paste kode tersebut persis diatasnya kode ]]></b:skin>
• kalo sudah yakin, klik Simpan

Catatan : 
>> untuk merubah warna background menu, silahkan edit/ganti kode #2a2626
>> untuk merubah warna background menu pada saat mouse hover, silahkan edit/ganti kode #6c6464
>> untuk merubah warna background dropdown menu, silahkan edit/ganti kode #6c6464

Tahap 2

• masuk ke Tata Letak, kemudian klik Tambahkan Gadget
• pilih "HTML/JavaScript" dengan meng-klik tanda "+"
• copy kode di bawah ini dan paste-kan ke dalam box konten, untuk judul biarkan saja kosong

<div id='abnnavbar'>
      <ul id='abnnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Contact</a>
       </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Blogging</a>
        </li>
  <li>
           <a href='#'>Services</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
                <li><a href='#'>Sub Page #4</a></li>
                <li><a href='#'>Sub Page #5</a></li>
              </ul>
        </li>
         <li>
          <a href='#'>Create This ></a>
        </li>
      </ul>
    </div>

abimalkanotes

• klik Simpan dan atur posisi gadget, letakan dibawah Header
• Simpan dan selesai

Catatan :

=> Ganti teks yang diblok warna  ....  dengan judul dari setiap menu

=> Ganti  #  dengan link/url dari tiap halaman yang berhubungan (related) dengan judul menu

Selamat mencoba...

Salam blogger ;)