Mungkin ada 2 cara yang dapat di ambil"
1. Cara pertama: Menampilkan hanya 3 menu pada bar navigasi, namun disamping sangat terbatasnya sub-menu yang dapat ditampilkan, karena salah satu atau semua menu bisa menjadi vertical susunannya, Saya melihat ini sedikit bermasalah dengan penyesuaian pada setiap ukuran layar yang lebih kecil. Apalagi jika Anda memilih ukuran font yang lebih besar.
2. Cara kedua: Membuat menu sliding atau horizontal scrollable sehingga setiap submenu dapat tampil tanpa batas secara horisontal pada layar mobile/hape/smartphone. Menu dapat digeser dari kanan ke kiri dan sebaliknya. Sepertinya saya telah membuat kedua tutorial diatas dalam blog ini. Anda dapat memperhatikan menu scrollabe pada tampilan template blog ini.
1. Cara pertama: Menampilkan hanya 3 menu pada bar navigasi, namun disamping sangat terbatasnya sub-menu yang dapat ditampilkan, karena salah satu atau semua menu bisa menjadi vertical susunannya, Saya melihat ini sedikit bermasalah dengan penyesuaian pada setiap ukuran layar yang lebih kecil. Apalagi jika Anda memilih ukuran font yang lebih besar.
2. Cara kedua: Membuat menu sliding atau horizontal scrollable sehingga setiap submenu dapat tampil tanpa batas secara horisontal pada layar mobile/hape/smartphone. Menu dapat digeser dari kanan ke kiri dan sebaliknya. Sepertinya saya telah membuat kedua tutorial diatas dalam blog ini. Anda dapat memperhatikan menu scrollabe pada tampilan template blog ini.
Cara kedua ini yang paling masuk akal dan diterima karena dapat menampilkan menu tanpa batas dan tidak perlu menu drop down lagi. Tinggal geser menu ke kiri dan ke kanan untuk menampilkannya.
Pertanyaan adalah aset yang berharga bagi blog ini, tentu saja adalah karena masalah desain atau masalah tampilan sebuah blog bersifat selera pribadi dan pilihannya semakin banyak dari waktu ke waktu.
Menjawab pertanyaan dari Anda diatas saya akan memberikan solusinya dan saya harap itu akan cukup mewakili teman teman yang lain juga.
Perhatikan animated gift dibawah ini:
tampilan navbar mobile untuk layar hape template contempo |
MENGAPA MENU NAVIGASI BLOG GAYA HORISONTAL PADA LAYAR HAPE?
- Karena responsif dan mobile friendly sesuai dengan misi blogging modern
- Karena ia ringan (tidak menggunakan javascript hanya HTML dan CSS saja)
- Karena ia mulai menjadi trend masa kini, lihat media media besar mulai menggunakannya.
Saya akan menjelaskan teknik membuat menu navigasi "cara kedua" karena:
Baca juga:
- Mudah dibuat
- Hanya menggunakan HTML, CSS
- Tidak menggunakan JavaScript
- Benar benar pure horisontal sliding
- Bisa diterapkan ke template default (bawaan) model lama dan model baru blogspot
Baca juga:
HORIZONTAL SCROLLING MENU NAVIGASI PALING SIMPEL DAN PALING RESPONSIF UNTUK BLOGGER
Fiturnya:
Fixed Navigasi, artinya biarpun konten di scroll ke atas dan kebawah menu navigasi akan tetap terlihat keberadaannya diatas header.
Warna mudah diganti sesuai keinginan bahkan jika Anda ingin warnanya menjadi gradasi.
Cara menerapkannya:
Fixed Navigasi, artinya biarpun konten di scroll ke atas dan kebawah menu navigasi akan tetap terlihat keberadaannya diatas header.
Warna mudah diganti sesuai keinginan bahkan jika Anda ingin warnanya menjadi gradasi.
Cara menerapkannya:
1. Langkah pertama tambahkan CSS:
- Masuk kepengaturan blog:
- Pilih tema atau theme
- Plih editHTML
- Cari kode </head> dan letakan kode berikut tepat diatasnya:
<style>div.scrollmenu {top:0px; background-color: #4682B4; overflow: auto; white-space: nowrap;position:fixed;z-index:99;width: 100%;height: 55px;}
div.scrollmenu a { display: inline-block;font-size: 16px; color: white; text-align: center; padding: 17px; text-decoration: none;}
div.scrollmenu a:hover { background-color: #777;}</style>
Kode yang saya sorot kuning adalah kode warna latar menu yang dapat Anda robah sendiri jika Anda menginginkan warna latar yang berbeda.
2. Langkah kedua tambahkan HTML:
- Masuk kepengaturan blog:
- Pilih tema atau theme
- Plih editHTML
- Cari kode <body> dan letakan kode berikut tepat diatasnya (atau letakan saja dibawah </head> :
<div class='scrollmenu'> <a href='/'>Beranda</a> <a href='#news'>Berita</a> <a href='#contact'>Kontak</a> <a href='#about'>Perihal</a> <a href='#support'>Dukungan</a> <a href='#blog'>Blog</a> <a href='#tools'>Tools</a> <a href='#base'>Basis</a> <a href='#custom'>Kustom</a> <a href='#more'>Lebih banyak</a> <a href='#logo'>Logo</a> <a href='#friends'>Teman</a> <a href='#partners'>Partners</a> <a href='#people'>Orang</a> <a href='#work'>Pekerjaan</a></div>
Anda bisa mengganti setiap tagar ('#about') dengan link blog daripada konten yang Anda inginkan.
Save tema. Lihat hasilnya melalui layar hape atau layar yang lebih kecil (mobile) dan coba usap menu ke kiri dan ke kanan melalui layar hape, menu akan terlihat sliding dengan mulus.
www.editblogtema.net
Thank you so much,jadi merasa tersanjung bisa di buat pembahsan khusus dari pertanyaan saya kemarin,jawabannya sangat membatu saya sekarang,terimakasih
BalasHapussaya juga berterimakasih karena pertanyaan itu sangat related dengan isi blog dan adalah input yang sangat bagus untuk melanjutkan misi blog ini he he he
HapusSaya coba langkah tersebut, dan sukses. Terima kasih informasinya.
BalasHapusO ya, jika rasa masih perlu drop down solusinya gimana ya? Maksudnya tab menu gabungan antara drop down dan scrolling? Mohon bantuannya.
BalasHapuscobalah pelajari melalui link ini.:
Hapushttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
Kalo mau diletakan dibawah layar gimana ya?
BalasHapusdi bawah layar dan menjadi footer? sebaiknya jangan melakukannya, karena memeberatkan loading. Jika ingin lakukan cara pertama yang lebih ringan (hanya tiga menu) caranya:
Hapus1. Masuk ke pengaturan Blogger
2. Pilih Tema
3. Pilih Edit HTML
Letakan kode CSS berikut tepat di atas kode: </head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #f0f0f0;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: right;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #f0f0f0;
color: black;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
</style>
Lalu tambahkan HTML berikut tepat di bawah kode <body> atau <body (hilangkan kurung ujungnya pada saat memasukan ke kotak pencarian halaman editor HTML blogger:
<div class="navbar">
<a href="#home" class="active">Home</a>
<a href="#privasi">Privasiews</a>
<a href="#contact">Contact</a>
</div>
Robah '#home', '#privasi' dan '#contact' dengan link Anda sendiri
Save template.
Save template