Drop Down (Sub) Menu

Saturday, July 6, 2013

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):

Buka dulu blog yang kita miliki
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
Buka web ini: http://cssmenumaker.com/css-drop-down-menu
Pilih bentuk dropdown yang kita inginkan
Klik tampilan yang kita inginkan
Klik Customize
Sekarang masukkan semua rencana yang sudah kita buat tadi, jika kotaknya kurang klik tombol Add Item
Klik Update Item
Sekarang klik tab HTML
Copy isinya, beri nama html_dropdown
Lalu kilik tab CSS
Copy isinya, beri nama css_dropdown
Klik Download
Save file cssmenu.zip
Unzip cssmenu.zip tersebut
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">
Sekarang kita buka Dashboard Blogspot kita
Pergi ke EDIT HTML
cari <head> dengan cara tekan Ctrl F, lalu paste kan (simpan) code style_dropdown dibawah <head>
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
Sekarang kita buka Perancang Template Blogger, buka Tambakan CSS
(Template ----->>> Sesuaikan ----->>> Perancang Template Blogger ---->>> Tingkat Lanjutan ---->>>> Tambahkan CSS)
Pastekan (simpoan) css_dropdownc di kotak Tambahkan CSS
Klik Lihat Blog
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: