Cara Membuat Menu Dropdown-Menu Menjorok ke Bawah Pada Header Blog Versi 2

Di dalam media blog setidaknya terdapat dua bentuk menu pada header yaitu Menu Horizontal dan menu dropdown. Pada posting sebelumnya saya sudah membagi tips membuat menu dropdown blog. Namun tampilan dari kedua menu sekarang dengan sebelumnya berbeda.

Kedua bentuk menu dropdown ini sama-sama dipergunakan sebagai tempat untuk membuat link dibawah header blog menjorok kebawah. Walaupun menu dropdown dibuat menggunakan kode ini menjorok ke bawah (sub menu dropdown) akan tetapi letaknya memanjang kearah kanan dibawah nama menu induk

Gambar: Tampilan Menu Dropdown Blog

Keterangan gambar:
Teks link menu berwarna putih merupakan teks link induk Menu Dropdown sementara tab sub menu dropdown menu berwarna hitam.

Cara membuat menu dropdown blog dapat dilakukan dengan langkah-langkah sebagai berikut:

Sign in di blog
Klick Template
Backup Template bila diperlukan.
Klick Edit HTML
Cari kode skin ]]></b:skin>
Copy lalu paste kode berikut ini pas di atas kode ]]></b:skin>
Klick Simpan Template untuk menyimpan perubahan

Ini kode yang dicopy untuk ditempatkan sesuai disarankan di atas.

.menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font-size:12px;
 font-weight:bold;
 }
.menu ul{
 background:orange;
 height:14px;
 list-style:none;
 margin:0;
 padding:0;
 }
 .menu li{
  float:left;
  padding:0px;
  }
 .menu li a{
  background:orange;
  display:block;
  font-weight:normal;
  line-height:14px;
  margin:0px;
  padding:0px 4px;
  text-align:center;
  text-decoration:none;
  }
  .menu li a:hover, .menu ul li:hover a{
   background: orange;
   text-decoration:none;
   }
 .menu li ul{
  background:orange;
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:auto;
  z-index:1;
  }

.menu li:hover ul{
  display:block;
  
  }
 .menu li li {
  background:#444444;
  display:block;
  float:left;
  margin:0px;
  padding:0px;
  width:auto;
  }
 .menu li:hover li a{
  background-color:#444444;
  
  }
 .menu li ul a{
  display:block;
  height:14px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 4px 0px 4px;
  text-align:left;
  }
  .menu li ul a:hover, .menu li ul li:hover a{
   background-color:#444444;
   border:0px;
   color:#444444;
   text-decoration:none;
   }

Di atas sudah dijelaskan dan dibarikan kode untuk membuat menu dropdown blog dan agar kode diatas dapat tampil menjorok ke bawah dapat mengikuti langkah kedua.

Kode step kedua ini merupakan teks link Menu Dropdwn untuk ditempatkan pada gadget HTML/JavaScript. Dan untuk keperluan itu dapat mengikuti artikel berikut ini lalu kemudian copy kode pada kolom textarea yang berada dibawah (kedua) atau pas dibawah kalimat Penulisan teks link sebagai teks link dropdown menu media online internet blog

Artikel lainnya

Url Domain Blogger Akan Diganti Masal Dalam Beberapa Bulan Lagi
Cara Menempatkan Trio Gadget Blog Dibawah Header Blog
Cara Membuat Page Navigasi Nomor Halaman Posting Blog
Url Domain Blogger Akan Diganti Masal Dalam Beberapa Bulan Lagi
Cara Mengundang Blogger Lain Menulis Pada Media Yang Kita Kelola
Istilah Yang Wajib Diketahui Blogger Untuk Menata Tampilan Media Online Blog