Hai sob, udah lama gak posting nih hehe, oke sekarang saya akan posting tentang Cara Buat Menu Dropdown di Blog, Bagi yang belum tahu dropdown menu akan saya beri tahu deh..Dropdown menu adalah menu yang biasanya berisi link-link untuk menuju
halaman tertentu. Tidak hanya itu, menu-menu ini juga memiliki sub menu
lagi yang tampil ke bawah dari menu tersebut oleh karena itu menu ini
disebut dropdown menu, karena tampilnya ke bawah. Sedikit bingung dengan
penjelasan saya ? baiklah, saya akan berikan contohnya:
Lalu, cara menambahkannya ke blog susah tidak ?
tentunya tidak sulit, kali ini kita hanya perlu memasukan 1 script ke
TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK.
5. Untuk kode #01a279 dan kode #028564 itu merupakan kode warna Anda dan bisa anda ganti dengan sesuka anda
6. dan kode 1100px itu untuk ukuran dan anda bisa ganti dengan sesuka anda
7. Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya
Jika Kode <!-- /content-wrapper--> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /content-wrapper--> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
8. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.
Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Cara Buat Menu Dropdown di Blog. Semoga bermanfaat !
Berikut saya perjelas langkah-langkahnya !
1. Login ke www.blogger.com menggunakan akun blog anda.
2. Buka menu TEMPLATE, pilih EDIT HTML
3. Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian)
4. Setelah ketemu, masukan kode dibawah ini tepat di atas kode ]]></b:skin>
#menu{background:#01a279;border:1px solid #028564;color:#fff;height:35px;font-family:'Oswald', Arial, sans-serif;width:938px;margin:15px auto;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:35px;width:1100px} #menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;font-weight:normal} #menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Open Sans', Arial, sans-serif;text-shadow: 0 -1px 0 #028564;} #menu li a{border-right:1px dotted #028564;} #menu li a:hover {color:#fff;background-color:#028564;-webkit-transition: all 0.6s ease-in;-moz-transition: all 0.6s ease-in;-o-transition: all 0.6s ease-in;transition: all 0.6s ease-in;} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer} #menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff} #menu label span{font:normal 14px Open Sans;position:absolute;left:35px;} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#01a279;border-top:1px solid #028564;border-left:1px solid #028564;border-bottom:1px solid #028564;position:absolute;z-index:99;display:none;left:-1px;} #menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none} #menu ul.menus a{color:#fff;text-transform:uppercase} #menu li:hover ul.menus{display:block} #menu a.dropdown{padding:0 27px 0 14px} #menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#e0f6f0 transparent transparent transparent;position:absolute;top:14px;right:9px} #menu ul.menus a:hover{background:#028564;color:#fff}
5. Untuk kode #01a279 dan kode #028564 itu merupakan kode warna Anda dan bisa anda ganti dengan sesuka anda
6. dan kode 1100px itu untuk ukuran dan anda bisa ganti dengan sesuka anda
7. Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya
Perhatian!<nav id='menu'> <input type='checkbox'/> <label><i class='icon-reorder'></i><span>Navigation</span></label> <ul> <li><a href='/'>Home</a></li> <li><a href='#'><span>About</span></a></li> <li><a href='#'><span>Contact</span></a></li> <li><a class='dropdown' href='#'>Drop menu</a> <ul class='menus'> <li><a href='#'>Drop Menu 1</a></li> <li><a href='#'>Drop Menu 2</a></li> <li><a href='#'>Drop Menu 3</a></li> </ul> </li> <li><a href='#'>Menu 2</a></li> <li><a href='#'><span>Menu 3</span></a></li> <li><a class='dropdown' href='#'>Drop Menu</a> <ul class='menus'> <li><a href='#'>SD</a></li> <li><a href='#'>SMP</a></li> <li><a href='#'>SMA</a></li> </ul> </li> </ul> </nav>
Jika Kode <!-- /content-wrapper--> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /content-wrapper--> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
8. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.
Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Cara Buat Menu Dropdown di Blog. Semoga bermanfaat !
Cara Buat Menu Dropdown di Blog
4/
5
Oleh
akuntest123
14 komentar
Tulis komentarkeeren nih gan menunya mirip ama blog ane, salam kenal gan ane pem blogger baru kunjungi gan!http://info-news99.blogspot.com/
Replyiya sob cumang beda warnanya aja, salam kenal juga sob!
ReplyBelum Bisa2 ya boz...sulit banget...keranjangberita.blogspot.com
Replydi coba trus sob sampai bisa :D
Replysob, susahnya cari kode ]]> sama apa mungkin nggak ada ya di blog saya, ada solusi lain nggak ? di tunggu balessannya kalau punya waktu luang.. seadanya1@gmail.com
Replysob cari kok enggk ketemu"
Replykok enggk ketemu"
Replyyg nomer 7 enggk ketemu sob
Replytolong bantuannya
Makasih banyak sob.. postingan yg sangat bermanfaat
Replysama-sama sob
ReplySaya ga bisa nemuin content wrapper....yg mirip juga ga tahu....pls bantu .....
Replykalau ini menunya ikut turun apa ga masss
Replygak ikut gan
Replyinspeksi elemen gan, dgn cara klik kanan pada halaman blog lalu inspeksi elemen
Reply=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]
• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]
• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]
• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]
• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
=======================================================