BELAJAR MEMBUAT WEBSITE DAN BLOG: Mudahnya membuat navigasi dropdown di blog

Mudahnya membuat navigasi dropdown di blog

Saat ini dunia internet khusunya dunia bloging atau website mengalami kemajuan pesat seiring itu juga banyak bermunculan web-web penyedia hosting gratisan baik yang berbasis blog,wap dan juga web, salahsatu peneyedia web hosting gratis yang berbasis blog yaitu google melalui bloggernya yang tentu sudah tidak asing lagi ditelinga kita dan ini sudah mendunia sejak dahulu, maraknya penyedia-penyedia hosting gratisan juga membuat persaingan yang ketat baik dari segi pelayan juga dari sisi kemudahan program yang ditawarkan, saat ini bloger yang disuguhkan secara gratis oleh raksasa internet masih yang terbaik dikelsnya selain praktis,mudah dan tanpa batasan banwich juga memungkinkan penggunanya untuk berkarya sendiri dengan widget HTML/JAVASCRIPT, dengan widget ini kita bis membuat apa saja, salah satunya adalah apa yang akan saya share berikut ini, yaitu cara membuat menu navigasi droptdown, berikut langkah langkahnya:

Jika anda sudah memiliki blog di blogspot munkin anda tinggal menjalankan langkah-langkah ini, pertama masuklah ke tab tata letak kemudian klik di tab disainer template
Kemudian anda akan beralih ke menu pengeditan tempalte, lalu klik pada menu editing tingkt lanjut, lalu kemudian klik menu tambahkan CSS,akan muncul layar isian yang kosong

kemudian pastekan script berikut ini
nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;} nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;} nav ul {overflow: hidden;float:left;background:#66bbdd; margin: 5px 0;width: 100%;} nav li {float:left;display:inline;} nav li a {padding:3px 15px;line-height:40px;color:#000000 !important;display:block;text-decoration:none;} nav li ul{margin:0px;display:block;width:200px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;} nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;} nav li li ul {left:200px;margin-top:-40px;} nav li.sub > a {position:relative;padding-right:40px;} nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#66bbdd transparent transparent transparent;position:absolute;top:14px;right:0px;} nav li.sub li.sub > a:after {content:"";width:0px;height:px;border-width:3px;border-style:solid;border-color:transparent transparent transparent#66bbdd; position:absolute;top:16px;right:10px;} nav li li:hover{background:rgba(0, 0, 0, 0.16);} 
Anda bisa merubah warna ukuran dan jenis text dan juga lebar dan tinggi kolom navigasi dengan mengutak-atik CSS nya
Kemudian klik pada tab terapkan keblog
Lalu atur warna tab dengan mengklik menu latar tab dan sesuaikan warna untuk menu navigasi yang sedang anda buat, kemudian klik tab terapkan keblog untuk menyimpan perubahan, kemudian klik tab kembali keblog untuk proses selanjutnya
Setelah berhasil menambahkan Css dan menyimpannya kemudian kembali ke keblog, langkah berikutnya adalah membuat kode HTML untuk menu navigasi blog anda,klik tab tata letak

dan anda akan diarahkan ke editing tata letak
Lalu klik tab tambahkan gadget
Setelah muncul jendela sembul berupa pilihan gadget, pilhkah HTML/Javascript
Kemudian muncul menu editing HTML/Javascript, lalu mulailah membuat kode HTML sesuai blog anda, mula-mula kosongkan judul gadget, kemudian isilah kontent gadget dengan kode berikut sebagai contoh,
<nav> <ul> <li><a href='http://trikmedia.net'>menu</a> </li> <li><a href='http://trikmedia.net'>Tentang blog</a> </li> <li class='sub'><'/search/label/Berita'>Berita</a> <ul> <li><a href='/search/label/Berita unik dan aneh'>Unik Dan aneh</a></li> <li><a href='/search/label/Berita Usaha'>Usaha</a></li> </ul> </li> <li class='sub'><a href='/search/title/Tips&Trik'>Tips & Trik</a> <ul> <li><a href='/search/label/Photoshop'>Photoshop</a></li> <li><a href='/search/label/Facebook'>Facebook</a></li> <li><a href='/search/label/Website'>Website</a></li> <li><a href='/search/label/SEO'>SEO</a></li> </ul> </li> </ul>
Dan ini penjelasannya
<nav> <ul> <li><a href='http://trikmedia.net'>Profil Admin</a> (ini adalah menu navigasi ke 1 tanpa submenu) </li> <li><a href='http://trikmedia.net'>Tentang blog</a> (ini adalah menu navigasi ke 2 tanpa submenu) </li> <li class='sub'><a href='/search/label/Berita'>Berita</a> (ini adalah menu navigasi ke 3 dengan submenu) <ul> <li><a href='/search/label/Berita unik dan aneh'>Unik Dan aneh</a></li> (ini adalah submenu ke 1 dari menu navigasi ke 3) <li><a href='/search/label/Berita Usaha'>Usaha</a></li> (ini adalah submenu ke 2 dari menu navigasi ke 3) </ul> </li> <li class='sub'><a href='/search/title/Tips&Trik'>Tips & Trik</a> (ini adalah menu navigasi ke 4 dengan submenu) <ul> <li><a href='/search/label/Photoshop'>Photoshop</a></li> (ini adalah submenu 1 dari menu navigasi ke 4) <li><a href='/search/label/Facebook'>Facebook</a></li> (ini adalah submenu 2 dari menu navigasi ke 4) <li><a href='/search/label/Website'>Website</a></li> (ini adalah submenu 3 dari menu navigasi ke 4) <li><a href='/search/label/SEO'>SEO</a></li> (ini adalah submenu 4 dari menu navigasi ke 4) </ul> </li> </ul> 
Jangan lupa edit lagi disesuaikan dengan menu-menu yang ada diblog anda

Kemudian klik simpan untuk mempublikasikan menu navigasi keblog anda