Rabu, 29 Juni 2016

Drop Down (Sub) Menu


Saya sering kagum pada blog yang mempunyai drop down menu.  Baru sekarang saya bisa membuatnya.  Nah bersama ini saya sajikan tentang cara membuat drop down menu di blogger.

 

Cara membuat Drop Down (Sub) Menu di Blogger (Blogspot):

  1. Buka dulu blog yang kita miliki
  2. Buat perencanaan menu drop down apa yang mau dibuat beserta addressnya, misalnya seperti ini:

    Home: http://www.anitanetphotography.com

    Welcome:http://www.anitanetphotography.com/2013/06/welcome.html

    Aboutme: http://www.anitanetphotography.com/p/aboutme.html

    Article: http://www.anitanetphotography.com/p/blog-page.html

    Link Favourite: http://www.anitanetphotography.com/p/link-favourite.html

    Tutorial:http://www.anitanetphotography.com/search/label/Tutorial

         Video Blogging:http://www.anitanetphotography.com/2013/06/tugas-
    12-video-blogging.html


         Integrasi Media Sosial:http://www.anitanetphotography.com/2013/06/tugas-22-integrasi-media-sosial.html

         Mempercantik Foto:http://www.anitanetphotography.com/2013/06/tugas-10-mempercantik-foto.html
       
    Tip's: http://www.anitanetphotography.com/search/label/Tips
         Drop Down Menu:http://www.anitanetphotography.com/2013/07/drop-down-sub-menu.html

         Perkenalan CSS:http://www.anitanetphotography.com/2013/07/perkenalan-css.htm

         Animasi GIF: http://www.anitanetphotography.com/2013/06/cara-membuat-animasi-gif.html

    Contact: http://www.anitanetphotography.com/p/contact.html
  3. Buka web ini: http://cssmenumaker.com/css-drop-down-menu
  4. Pilih bentuk dropdown yang kita inginkan
  5. Klik tampilan yang kita inginkan
  6. Klik Customize
  7. Sekarang masukkan semua rencana yang sudah kita buat tadi, jika kotaknya kurang klik tombol Add Item
  8. Klik Update Item
  9. Sekarang klik tab HTML
  10. Copy isinya, beri nama html_dropdown
  11. Lalu kilik tab CSS
  12. Copy isinya, beri nama css_dropdown
  13. Klik Download
  14. Save file cssmenu.zip
  15. Unzip cssmenu.zip tersebut
  16. lalu buka file instructions, lalu copy code yang paling atas, beri nama style_dropdown

    bentuk codenya seperti ini:
    <link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
  17. Sekarang kita buka Dashboard Blogspot kita
  18. Pergi ke EDIT HTML
  19. cari <head> dengan cara tekan Ctrl F,  lalu paste kan (simpan) code style_dropdown dibawah <head>
  20. cari lagi <div class='tabs-outer'>, beri jarak agak lebar agar nanti kapan2 jika kita mau merubah bentuk dropdownnya menjadi mudah,  lalu pastekan (simpan) code html_dropdown dibawahnya
  21. Sekarang kita buka  Perancang Template Blogger, buka Tambakan CSS
    (Template ----->>> Sesuaikan ----->>> Perancang Template Blogger ---->>> Tingkat Lanjutan ---->>>> Tambahkan CSS)
  22. Pastekan (simpoan)  css_dropdownc di kotak Tambahkan CSS
  23. Klik Lihat Blog
  24. Nah..... sekarang menu drop down (sub) menu kita sudah jadi
    Selesai.... Selamat Mencoba !


Jujur saja tutorial Drop Down (Sub) Menu ini adalah favourite saya, sudah lama saya ingin bisa membuatnya baru sekarang saya bisa dengan bimbingan Mbak Lala, tq so much buat Mbak Lala dengan DigitalMommie nya.
Note: sebelum kamu mencoba membuatnya jangan lupa save dulu template nya ya.... takut2 kalau error jadi kamu bisa kembali mulai dari awal.


Jika mau buat Drop Down diatas header:
  1. Buka home blogger kita
  2. letakkan kursor diatas header
  3. Klik kanan mouse
  4. pilih Inspect Element
  5. ternyata posisinya ada di <div class="content-inner">
  6. Buka EDIT HTML cari <div class="content-inner">
  7. lalu enter2 sampai ada jarak dibawahnya
  8. Pastekan html_dropdown dibawah <div class="content-inner">
  9. Lihat blog
  10. Selesai !

Tidak ada komentar:

Posting Komentar