Cara Menciptakan Hidangan Dropdown Di Blogspot

Saya sempat frustasi dalam menciptakan ini  yaitu Menu dropdown,soal nya sudah aku coba banyak sekali cara tapi tetap hasil nya nol, tapi terakhir kali aku cari cara nya ternyata dapat ,dan udah muncul sajian dropdow nya alhamdulilah.

Dan ternyata cara ini dapat di terapkan di blog aku mungkin alasannya ialah Templeate nya,yang udah aku ganti. dikala itu Masih pake templeate bawaan blogspot,dan banyak sekali cara aku coba untuk menciptakan sajian dropdown tapi selalu gagal/tidak muncul halaman blog saya,setelah aku ganti templeate blog aku ,dan kini udah dapat di terapin.jadi inti nya jikalau cara ini tidak dapat diterapin di blog anda ,saya sarankan untuk mengganti templeate nya!

Dan aku mau membuatkan cara nya kepada anda yang mau menciptakan sajian dorpdown.

Cara nya cukup tidak mengecewakan praktis ,cuman dua langkah saja!

lebih enak  nya mari ikuti langkah langkah nya:

→ Buka dasbor blog anda

→ klik sajian TEMPLATE, pilih EDIT HTML

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

→ Setelah ketemu, masukan instruksi dibawah ini sempurna 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 instruksi warna yang lain nya klik disini 

→ kalau sudah simpan templeate nya

→ kita beralih ke tata letak

→ Add gatgets/tambah gatget

→ taruh instruksi 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 sajian /menu silah kan di namai sesuai harapan anda 

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

Share this post