Cara Membuat Navigasi Horizontal Dropdown Menu / Vertikal Navigasi Menu Di Blogger

Hallo Sobat Informasi maya selamat sore ketemu lagi dengan Kang Salman. mudah-mudahan kalian sehat selalu :) Ok sekilas saja, Kemarin ada yang bertanya kepada saya "Bagaimana cara membuat horizontal dan vertikal navigasi menu di blogspot?". beliau bernama fatur. inilah cara membuat Navigasi Menu _____________________________________________________________ Inysa Allah saya dapat membantu. setelah membaca email dari anda ada beberapa hal yang ingin saya sampaikan : Di bawah ini adalah langkah-langkah yang benar silakan di ikuti. Langsung Aja yuk kita praktik kang fatur bagaimana cara membuat Horizontal Menu Blog : 1. 2. Cari Kode kode ]]></b:skin> Copy paste kode berikut simpan persis di atas kode ]]></b:skin>

Top of Form Bottom of Form /* navbar ================== */ #bg_nav { background: #000000; width: 660px; height: 29px; font-size: 11px; font-family: Arial, Tahoma, Verdana; color: #FFFFFF; font-weight: bold; margin: 0px auto 0px; padding: 0px; border-top: 1px solid #333333; border-bottom: 1px solid #333333; overflow: hidden; } #bg_nav a, #bg_nav a:visited { color: #FFFFFF; font-size: 11px; text-decoration: none; text-transform: uppercase; padding: 0px 0px 0px 3px; } #bg_nav a:hover { color: #FFFFFF; text-decoration: underline; padding: 0px 0px 0px 3px; } #navleft { width: 440px; float: left; margin: 0px; padding: 0px; } #navright { width: 200px; font-size: 11px; float: right; margin: 0px; padding: 6px 5px 0px 0px; } #navright a img { border: none; margin: 0px; padding: 0px; } #nav {

padding: 7px 30px 7px 10px. padding: 0px. padding: 0px. display: block. width: 160px. } #nav li:hover ul. #nav li li a:active { background: #666666.sfhover ul { left: auto. } #nav li li { float: left. list-style: none. display: block. float: none. #nav li li a:link. padding: 7px 30px 7px 10px. padding: 0px. list-style: none. } #nav li li a:hover. } #nav li:hover ul { left: auto. font-weight: bold. left: -999em. text-decoration: none. #nav a:visited { background: #222222. margin: 0px. } #nav li { float: left. border-left: 1px solid #000000 } #nav a:hover { background: #6e6d6d. color: #FFFFFF. } #nav li li a. margin: 0px. padding: 8px 15px 8px 15px. #nav li. } #nav ul { margin: 0px. padding: 0px.margin: 0px. padding: 8px 15px 8px 15px. width: 150px. Tuju bagian bawah. margin: 0px. } 3. lalu cari seperti berikut ini : <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> . margin: 0px. } #nav li ul { position: absolute. border-left: 1px solid #000000. width: 10em. border-right: 1px solid #000000. } #nav a. #nav li li a:visited { background: #333333. border-bottom: 1px solid #000000. margin: 0px. color: #FFFFFF.

blogspot.com/search/lebel/tips blog/'>Tips and Trick </a></li> <li><a href='http://asksalman19.blogspot.com/'>Belajar Komputer</a></li> <li><a href='alamatBlogAnda. Catatan : Navbar yang saya buat sudah saya modifikasi sehingga memiliki fungsi dropdown menu.com/search/lebel/seo/'>Tips SEO Backlink </a></li> <li><a href='http://asksalman19.com/seacrh/lebel/make money/'>Bisnis Online </a></li> </ul> </li> <li><a href='#'>Teknologi Informasi </a></li> <ul> <li><a href='alamatBlogAnda. 6.blogspot.com/'>Other</a></li> </ul> </li> <li><a href='#'>Internet</a></li> <ul> <li><a href='asksalman19. Jika anda ingin menghilangkan fungsi dropdownnya hapus saja <ul> dan </ul></li> contoh : <li><a href='alamat-url-anda.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form> </div> </div><!-.blogspot.blogspot.blogspot.com'>Antivirus</a></li> <li><a href='alamat-url-anda.blogspot.blogspot.com/search/lebel/anti virus/'>Anti Virus </a></li> </ul> </ul> </div> </div> <div id='navright'> <form action='http://alamat-url-anda.com/'>Nama-Menu </a></li> </li> <li><a href='#'>Belajar Ilmu Komputer</a></li> <ul> <li><a href='portal-komputer.com/'>Nama-Menu </a></li> <li><a href='http://asksalman19.com'>Serba-serbi</a></li> <li><a href='http://Namaanda.blogspot.com/'>home</a></li> <li><a href='#'>Info Serba-Serbi</a></li> <ul> <li><a href='Namaanda.blogspot.blogspot.</b:section> </div> 4. * Gantilah tulisan yang berwarna merah sesuai alamat blog yang anda inginkan.com'>Internet Acceleator</a></li> <li><a href='alamat-url-anda.blogspot.com/search/lebel/internet'>Jaringan</a></li> <li><a href='http://asksalman19.akhir bg_nav --> 5.blogspot.blogspot. Klik tombol SIMPAN TEMPLATE.blogspot.blogspot.blogspot.com/'>Nama-Menu </a></li> <li><a href='alamatBlogAnda. Copy paste code berikut persis di bawah kode yang tadi : <div id='bg_nav'> <div id='navleft'> <div id='nav'> <ul> <li><a href='asksalman19.com/'>Nama-Menu </a></li> <li><a href='alamatBlogAnda.blogspot.com'>Software</a></li> <ul> <= hapus <li><a href='alamat-url-anda.com/'>lifestyle</a></li> <li><a href='http://Namaanda.blogspot.com’>Multimedia'></a></li> </ul> <= hapus .com. Selesai.

} #navright { width: 200px.com'>Internet Acceleator</a></li> <li><a href='#’>Multimedia'></a></li> Untuk sementara percobaan ini sudah selesai. border-top: 1px solid #333333. } .com/albums/zz36/asksalman/menu.blogspot. font-weight: bold. height: 29px.photobucket.blogspot. namun tentunya jika kamu menerapkan pada template kamu. font-family: Arial. Tahoma. ada beberapa yang perlu di sesuaikan. margin:7px 10px 7px 0.blogspot. width:180px. font-size: 11px.com'>Antivirus</a></li> <li><a href='alamat-url-anda. float: left. Verdana. padding: 6px 5px 0px 0px. margin: 0px. padding:3px 4px 3px 8px. overflow: hidden.gif) top right no-repeat. font-size: 11px. } Catatan : Untuk Membuat Vertikal Menu Navigasi : Tambahkan kode dibawah ini sesudah kode <style type="text/css"> dan sebelum kode </style>. border-bottom: 1px solid #333333. link. padding: 0px. keyword yang di inginkan serta yang lainnya. height:20px. tempatnya di mana saja asalkan di antara kode tadi. float: right. misal : width:990px. } kamu juga harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template kamu.</li> <= hapus *Hapuslah Kode Yang telah saya beri tanda Merah hapus untuk menghilangkan fungsi dropdown menu! Sehingga hasilnya akan menjadi seperti di bawah ini : <li><a href='alamat-url-anda. margin: 0px.com'>Software</a></li> <li><a href='alamat-url-anda.kang-salman{ text-align:left. beberpa contoh di antaranya : /* navbar ================== */ #bg_nav { background: #000000. background:#f0f0f0 url(http://i811. margin: 0px auto 0px. Beberapa di antaranya yaitu lebar dari navigasi. . #navleft { width: 440px. width: 660px. padding: 0px. color: #FFFFFF. display:block.

adalah tampilan button 2 terlihat saat mouse di arahkan menyentuh tombol navigasi.. jika di samakan seperti contoh di atas navigasi tersebut tidak akan berubah warna.com">Menu</a><span class="hide"> | </span> <a class="kang-salman" alamatBlogAnda.gif) top right no-repeat.com/albums/zz36/asksalman/menu.blogspot.com">Nama Menu Anda</a><span class="hide"> | </span> Setelah itu Simpan dan lihat hasilnya.blogspot. sekarang anda sudah memiliki navigasi horizontal Menu Semoga dapat membantu anda ^_^ Wasalamualaikum Wr. } Catatan : kedua alamat url photobucket di atas adalah bentuk dari tombol navigasi yang saya buat. kamu bisa mengubahnya sendiri. Pilih HTML / Javascript 4.photobucket. Setelah selesai Simpan Tamplate Langkah berikutnya adalah. sehingga bisa berubah warna dan da bentuk. Wb Regard : Kang Salman http://asksalman19.blogspot. kamu harus mengubahnya sesuai dengan nilai yang pas untuk template kamu <a class="kang-salman" alamatBlogAnda.blogspot.kang-salman:hover{ background:#97A4B9 url(http://i811.com">Tips Anda Trick</a><span class="hide"> | </span> <a class="kang-salman" href="alamatBlogAnda.com">Bisnis Online</a><span class="hide"> | </span> <a class="kang-salman" alamatBlogAnda. terlihat saat mouse tidak di arahkan kesana 2. Tambahkah Widget/Gedget Baru 3. Pilih Tata Letak 2.com">Tukar Link</a><span class="hide"> | </span> <a class="kang-salman" alamatBlogAnda.com . Silakan Copy kode Di bawah ini dan Pastekan Widget baru tadi kamu pilih ! Yang inipun sama. 1.blogspot. text-decoration:none. 1. (tergantug kita membutnya) 3. yang pertama adalah tampilan button dasar dari navigasi.blogspot.

Sign up to vote on this title
UsefulNot useful