Cara Buat Dropdown Menu di Blog
Blog Menu barCara Membuat Dropdown Menu di blog - Hmm, Lagi-lagi saya posting tentang dropdown menu hehe gak apa-apa deh, sobat sudah pada tau dropdown menu itu apa kan? Dropdown menu adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi Dropdown menu yaitu untuk menyimpan link-link penting di suatu blog, agar
pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada
pada suatu blog itu.Dropdown menu kali ini saya buat sendiri kode CSSnya, oke dibawah ini adalah screenshotnya:
1. Login ke Blogger
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
4. 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.
Semoga Tutorial Saya Ini Bermanfaat Bagi Anda Yang Membutuhkan Navigasi Dropdown Menu , Jangan Lupa Berkomentar Dahulu Sebelum Mempraktekan Walaupun Hanya Berterima Kasih
1. Login ke Blogger
2. Pilih Template >> Edit HTML
3. Cari kode ]]></b:skin>, copy kode dibawah ini dan
letakkan tepat diatas kode ]]></b:skin>.
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpurTYOMNbyGc3UDQkUYq2vYmm-K_b50XlG2gTIX2GvuLp1U1xTIbEjRR_JN3WLsffOAsXl6rSyA8xqsSE164Ct7Bndbi2uTtTW3sT_Uq7g9K3Cf-kAaddIAWCZBkaaNxM2pparx6Y7M/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;} #menuwrapper{width:980px;height:35px;margin:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcoQbaggiJVCuqxCNuRQklUu622l46P_zbvkFw0RpSlXvINWTBqpfG2YI6lgcICWgGLOpfRXVmQ5VFAXpVQahe8ia25Gg3NM6Eu1dUN5uBq_-uUqhUpuGGsZiG_nPCG__wzh3P5Nz4dvhT/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;} #menubar a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MSG7X2PnpJLHtNHs04uOh7MZOAmVPgY0iu2penI38e6GXzKql1o2Gazu6XftIixSKoE8U0xCNsOyna0C45nX2gUvw8nsmoadBsA9tp0RQPhwJ11-4RMGeQ2InOhikVt-yP3e6k-JXCM/s1600/nav.png) repeat-x} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{color:#80C8FE} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpurTYOMNbyGc3UDQkUYq2vYmm-K_b50XlG2gTIX2GvuLp1U1xTIbEjRR_JN3WLsffOAsXl6rSyA8xqsSE164Ct7Bndbi2uTtTW3sT_Uq7g9K3Cf-kAaddIAWCZBkaaNxM2pparx6Y7M/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a} #menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0} #menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}
Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya
Perhatian!<div id='menuwrapperpic'> <div id='menuwrapper'> <ul id='menubar'> <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXCHXTOTb405pl0j0Ecq4cJQBmI9dd_Plgb9bD87nMSmSeOIhJzJBqVzoDzcq2XK-RZYI_XVceJMKztpCFI0xJ1yKo0OI4D1bHB8qhoV7laR4BOIWqa7_K9b7fQjrOsDvsmLb7Pgx90eSL/s1600/home_white.png' style='padding:0px;'/></a></li> <li><a href='#'>About Us</a></li> <li><a href='#'>Contact Us</a> <ul> <li><a href='#'>Goggle +</a></li> <li class='hr'/> <li><a href='#'>Contact on Facebook</a></li> <li class='hr'/> <li><a href='#'>Contact on Twitter</a></li> </ul> </li> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a> <ul> <li><a href='#'>Sub Menu 1</a></li> <li class='hr'/> <li><a href='#'>Sub Menu 2</a></li> <li class='hr'/> <li><a href='#'>Sub Menu 3</a></li> </ul> </li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a> <ul> <li><a href='#'>Sub menu 1</a></li> <li class='hr'/> <li><a href='#'>Sub Menu 2</a></li> <li class='hr'/> <li><a href='#'>Sub Menu 3</a></li> </ul> </li> </ul> <br class='clearit'/> </div> <div style='clear:both;'/> </div>
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
4. 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.
Semoga Tutorial Saya Ini Bermanfaat Bagi Anda Yang Membutuhkan Navigasi Dropdown Menu , Jangan Lupa Berkomentar Dahulu Sebelum Mempraktekan Walaupun Hanya Berterima Kasih
