Cara Membuat Menu Dropdown Di Blogspot

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

• SUBHANALLAH
• ALHAMDULILLAH
• ALLAHU AKBAR
• LA ILAHA ILLALLAH
• ALLAHUMMA SHOLLI 'ALA MUHAMMAD

Saya sempat putus asa dalam membuat ini  yaitu Menu dropdown,soal nya sudah saya coba berbagai cara tapi tetap hasil nya nol, tapi terakhir kali saya cari cara nya ternyata bisa ,dan udah muncul menu dropdow nya alhamdulilah.

Dan ternyata cara ini bisa di terapkan di blog saya mungkin karena Templeate nya,yang udah saya ganti. saat itu Masih pake templeate bawaan blogspot,dan berbagai cara saya coba untuk membuat menu dropdown tapi selalu gagal/tidak muncul halaman blog saya,setelah saya ganti templeate blog saya ,dan sekarang udah bisa di terapin.jadi inti nya jika cara ini tidak bisa diterapin di blog anda ,saya sarankan untuk mengganti templeate nya!

Dan saya mau berbagi cara nya kepada anda yang mau membuat menu dorpdown.

Cara nya cukup lumayan gampang ,cuman dua langkah saja!

lebih enak  nya mari ikuti langkah langkah nya:

→ Buka dasbor blog anda

→ klik menu TEMPLATE, pilih EDIT HTML

→ Cari kode ]]></b:skin> (.gunakan ctrl+f untuk lebih gampang nya)

→ Setelah ketemu, masukan kode dibawah ini tepat di atas kode ]]></b:skin>

 

#DropdownMenu {
    background:#ff6803;
border-radius:6px;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color:#FFFFFF;
    font-weight: bold;
    margin-bottom: 30px;
    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:6px;
    color:#FFFFFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    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:#ff6803;
    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;
}

Perhatian:Yang warna hijau itu warna bacgroun nya silahkan tinggal di ganti sesuai yang anda inginkan 

 mau lihat kode warna yang lain nya klik disini 

→ kalau sudah simpan templeate nya

→ kita beralih ke tata letak

→ Add gatgets/tambah gatget

→ taruh kode dibawah ini

   
<div id="DropdownMenu">
       <div id="Dropdownbox">
      <ul id="strike">
        <li><a href="#">Menu1</a></li>
        <li>
          <a href="#">Menu2</a>
          <ul>
            <li>
              <a href="#">Sub Menu 2</a>
              <ul>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
              </ul>
            </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>
            <li><a href="#">Sub Menu 6</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
      </ul>
    </div>
  </div>

Nb: •yang tanda # itu silahkan di ganti dengan URL yang dituju!

      •dan yang sub menu /menu silah kan di namai sesuai keinginan anda 

sekian dari saya,semoga cara ini bisa berhasil di terapkan di blog anda. 

• ASTAGHFIRULLAHAL 'ADZIM
• Aku mohon ampun kepada Allah yang Maha Agung

Tweet