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:
- Buka home blogger kita
- letakkan kursor diatas header
- Klik kanan mouse
- pilih Inspect Element
- ternyata posisinya ada di <div class="content-inner">
- Buka EDIT HTML cari <div class="content-inner">
- lalu enter2 sampai ada jarak dibawahnya
- Pastekan html_dropdown dibawah <div class="content-inner">
- Lihat blog
- Selesai !
Tidak ada komentar:
Posting Komentar