Cara Membuat Menu Dropdown Di Blogspot

Cara Membuat Menu Dropdown Di Blogspot

Halo teman-teman selamat datang di blog satriafm, pada artikel kali ini saya mau menulis artikel tentang cara membuat menu dropdown di blogspot.

Menu dropdown itu apasih? menu dropdown yaitu sebuah navigasi menu yang umunya terletak pada bagian atas halaman.

Untuk kamu yang belum paham dengan penjelasan diatas, ini saya kasih gambar dari bentuk dropdown.

Contoh Dropdown

Gambar diatas merupakan contoh dropdown sederhana temen-temen, dropdown sendiri sebenarnya kita bisa kreasikan menjadi big dropdown dan lainnya.

Tetapi pada tutorial kali ini kita akan membuat tutorial mengenai cara membuat dropdown seperti gambar di atas.

Tanpa berlama-lama yuk langsung saja saya bahas ya.

Cara Membuat Menu Dropdown Di Blogspot

Pastikan sebelum kalian membuatnya kalian sudah berada di dashboard blogger kalian masing-masing ya, jika sudah bisa ikuti langkah-langkah berikut ini.

1. Pertama klik opsi tema pada navigasi di kiri kita.

Pilih Opsi Tema

2. Klik tanda arah panah kebah disamping sesuaikan.

Pilih Tanda Panah

3. Pilih tulisan "Edit HTML".

Pilih Edit HTML

4. Ketik "CTRL + F" pada bagian editor html dibawah, bukan di chrome ya teman-teman.

Editor HTML

5. Jika sudah bertemu kurang lebih bentuknya ada href = yang maksudnya link kita tuju kalau kila klik tombol tersebut dan ada about = tulisan yang muncul dari tampilan blog kita.

6. Jika kita copy paste diatas itu jadinya bukan dropdown, melainkan navigasi biasa.Oleh karena itu jika kita ingin membuat dropdown, kamu bisa copy kode dibawah ini.

<li class='menu-sub'><a href='#'><span>Menu</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
</li>

7. Kalian bisa ganti tulisan kuning diatas sesuai tulisan yang ingin kita tampilkan.

8. Tulisan merah diatas, kalian bisa ganti sesuai jenis css pada tema kalian.Seharusnya masing-masing tema nama cssnya berbeda-beda.Tapi apabila kalian ingin menggunakan nama itu kalian harus menambahkan css dibawah ini disebelah atas code ]]></b:skin>.

#menutop ul,
#menutop li,
#menutop span,
#menutop a {
  margin: 0;
  padding: 0;
  position: relative;
}
#menutop {
  height: 49px;
  background: #D5D5D5;
  border-bottom: 4px solid #59c5ff;
  width: auto;
}
#menutop:after,
#menutop ul:after {
  content: '';
  display: block;
  clear: both;
}
#menutop a {
  background: #D5D5D5;
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#menutop ul {
  list-style: none;
}
#menutop > ul,#menutop > ul > li {
  float: left;
}
#menutop > ul > li > a {
  color: #000;
  font-size: 12px;
}
#menutop > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
  background: #ececec;
}
#menutop .menu-sub {
  z-index: 1;
}
#menutop .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#menutop .menu-sub ul li {
  margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
  background: #59c5ff;
  border-bottom: 1px solid #8cd7ff;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
  background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub .menu-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
  background: #26b3ff;
  border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
  background: #0daaff;

9. Kalian bisa ganti tulisan berwarna hitam menjadi link yang kalian inginkan.

10. Selesai, dropdown pada blog kalian sudah berhasil.

Demikianlah artikel kali ini mengenai cara membuat menu dropdown di blogspot, apabila ada pertanyaan terkait error bisa tanyakan di kolom komentar.

Terima kasih sudah berkunjung semoga bermanfaat dan sampai jumpa di lain artikel 🙌.

Incoming search :
  • cara membuat menu dropdown di blog tanpa edit html
  • cara membuat menu di blogspot tanpa edit html
  • cara membuat menu dropdown ke samping
  • cara membuat sub sub menu di blogspot
  • cara membuat sub menu dropdown pada blog tanpa edit html
  • blogger
  • cara membuat menu dropdown keren di blog
  • cara membuat menu bar di blogger