Thursday, June 16, 2016

Cara Membuat Drop Down Menu pada Blogspot

Drop down menu digunakan untuk mengorganisir postingan-postingan kita yang mungkin sangat banyak. Dalam windows eksplorer mungkin mirip seperti folder-folder. Postingan-postingan kita yang tidak diorganisir ke dalam menu-menu dan submenu mungkin akan terlihat berantakan dan orang yang berkunjung ke blog kita pun akan pusing kebingungan dengan konten blog itu sendiri yang semrawut gak jelas ‘panuju’. Nah, karena itu saya ingin share tentang bagaimana membuat menu dan dropdown menu.


Untuk kalian yang bisa berbahasa inggris dengan baik dan benar mungkin bisa berkunjung ke situs referensi saya ini (link). Tapi kalau malas, mari simak pemaparan berikut.

  1. Hal yang pertama jelas kalian harus punya blog dulu di blogspot atau blogger :D
  2. Sekarang masuk ke bagian layout
  1. Di menu layout, masukkan gadget dengan memilih tombol “add gadget” lalu pilih “HTML/Java Script gadget” Kemudian masukkan ini ke dalam Content nya:
<ul id="icbabdrop">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>
    Topics
    <ul>
      <li><a href="#">Lifestyle</a></li>
      <li><a href="#">Blogging</a></li>
      <li><a href="#">Art and Design</a></li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

  1. Save, dan coba lihat blog sementara setelah dimasukkan script

  1. Oke, sekarang dropdown menu nya sudah muncul, tapi setiap menunya masih belum bisa berfungsi. Agar dapat berfungsi, maka tanda pagar "#" pada script di point 3 harus diganti dengan link dari kumpulan artikel yang sesuai dengan tema dari menu dan submenu pada dropdown menu.
  2. Misalkan kita ingin mengumpulkan artikel-artikel dengan tema yang sama, maka coba kita pilih salah satu artikel yang kita miliki, setelah itu pilih “Labels” di sebelah kanan artikelnya, lalu tuliskan tema artikel tersebut “Lifestyle”. Setelah itu, update perubah yang kita lakukan.
  3. "View blog" yang sudah kita berikan "Labels"
  4. Klik "Labels" "Lifestyle" yang sudah kita buat, lalu copy link address dari "Labels" "Lifestyle" tersebut.
  5. Paste link address nya untuk mengganti tanda pagar yang di point 5 disinggung.
  6. Done!
Oke demikian ulasan dari pembuatan Drop down menu-nya, semoga bermanfaat dan selamat mencoba :)

Nb. Kalau ada yang kurang mohon dimaafkan ya ;)

Written by: Aditya Rakhmawan
#Tutorial #Blogging

No comments:

Post a Comment