komputerdia.com - Diartikel kali ini, saya masih membahas ihwal pembuatan sajian kafe atau sajian navigasi pada blogger. Untuk mempersingkat waktu pembahasan silahkan kalian perhatikan langkah-langkah dibawah ini :
Baca Juga :
- Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
- Cara Membuat Menu Bar Responsive Blogger Tanpa Edit Html .
- Cara Lengkap Membuat Blog Terbaru Disertai Dengan Gambar .
Membuat Menu Navigasi Simple Dropdown
1. Menu Bar Simple Blue
- Langkah pertama silahkan kalian masuk ke akun blogger
- Masuk ke sajian Layout atau Tata Letak
- Pilih sajian Tambahkan Gadget atau Add Widget dan pilih sajian Html/JavaScript , dan tempelkan arahan dibawah ini sempurna di kolom atau bab konten
- Untuk bab judul biarkan kosong
- Setelah kalian atur, silahkan tekan tombol simpan .
.navmenu { width: 100%; margin: 0px auto; display: block; position: relative; background-color: #1C90F3; } nav.navmenu ul { list-style: none; position: relative; width: 80%; box-sizing: border-box; background: #1C90F3; margin: 0px auto; padding: 0px; } nav.navmenu li { display: inline-block; position: relative } nav.navmenu li a { padding: 10px 15px; text-decoration: none; color: #FFF; display: block; box-sizing: border-box; } nav.navmenu li a:hover { background-color: #1789EA } <nav class='navmenu'> <ul> <li><a href="#"><b><i class="fa fa-home" aria-hidden="true"></i> Home</b></a></li> <li><a href="#"><b><i class="fa fa-sitemap" aria-hidden="true"></i> Networking</b></a></li> <li><a href="#"><b><i class="fa fa-windows" aria-hidden="true"></i> Windows</b></a></li> <li><a href="#"><b><i class="fa fa-android" aria-hidden="true"></i> Android</b></a></li> <li><a href="#"><b><i class="fa fa-linux" aria-hidden="true"></i> Linux</b></a></li> </ul> </nav> 2. Menu Bar Simple Blue DropDown
- Langkah pertama silahkan kalian masuk ke akun blogger
- Masuk ke sajian Layout atau Tata Letak
- Pilih menu Tambahkan Gadget atau Add Widget dan pilih menu Html/JavaScript , dan tempelkan arahan dibawah ini sempurna di kolom atau bab konten
- Untuk bab judul biarkan kosong
- Setelah kalian atur, silahkan tekan tombol simpan .
.navmenu { width: 100%; margin: 0px auto; display: block; position: relative; background-color: #1C90F3; } nav.navmenu ul { list-style: none; position: relative; width: 80%; box-sizing: border-box; background: #1C90F3; margin: 0px auto; padding: 0px; } nav.navmenu li { display: inline-block; position: relative } nav.navmenu li a { padding: 10px 15px; text-decoration: none; color: #FFF; display: block; box-sizing: border-box; } nav.navmenu li a:hover { background-color: #1789EA } nav.navmenu li.submenu ul.dropdown { display: none; padding: 0px; position: absolute; } nav.navmenu li.submenu:hover ul.dropdown { display: block; z-index:9 } nav.navmenu li.submenu ul.dropdown li { display: block; width: 200px; background: #1C90F3 } <nav class='navmenu'> <ul> <li><a href="#"><b><i class="fa fa-home" aria-hidden="true"></i> Home</b></a></li> <li><a href="#"><b><i class="fa fa-sitemap" aria-hidden="true"></i> Networking</b></a></li> <li><a href="#"><b><i class="fa fa-windows" aria-hidden="true"></i> Windows</b></a></li> <li class='submenu'><a href="#"><i class="fa fa-plus-square" aria-hidden="true"></i> <b>Menu Dropdown</b></a> <ul class='dropdown'> <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> <b> Dropdown 1</b></a></li> <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> <b>Dropdown 2</b></a></li> <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> <b>Dropdown 3</b></a></li> </ul> </li> <li><a href="#"><b><i class="fa fa-android" aria-hidden="true"></i> Android</b></a></li> <li><a href="#"><b><i class="fa fa-linux" aria-hidden="true"></i> Linux</b></a></li> </ul> </nav> - Sekian, semoga artikel ini dapat bermanfaat untuk kalian semuanya
- Jika ada yang ditanyakan, silahkan masukkan komentar kalian di kolom komentar yang telah saya sediakan diakhir postingan ini
Sumber Referensi : https://mastamvan.blogspot.co.id/