CARA MENAMPILKAN MENU NAVIGASI MOBILE HORISONTAL DAN RESPONSIVE PADA BLOGGER | editblogtema editblogtema: CARA MENAMPILKAN MENU NAVIGASI MOBILE HORISONTAL DAN RESPONSIVE PADA BLOGGER

Logtema

×
tutorial dan teknik

CARA MENAMPILKAN MENU NAVIGASI MOBILE HORISONTAL DAN RESPONSIVE PADA BLOGGER

pertanyaan yang sering diajukan

Sang PengusahaMay 17, 2019
saya mau tanya brother,kalau utuk membuat tampilan horizontal navigasi menu nya terlihat di hape,ada solusinya bro?

thank you so much

ReplyDelete

sofyan Ya-anMay 17, 2019
Menilik kepada ukuran layar yang terbatas, ada dua cara yang dapat kita lakukan agar menu navigasi pada hape tetap terlihat "horisontal" daripada "dropdown atau secara vertikal" Menampilkan Menu navigasi horisontal yang mirip dengan tampilan pada layar desktop PC bukanlah ide yang bagus. Namun saya ingin memberikan solusi:

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 memiliki opsi menu "dropdown" Saya melihat ini sedikit bermasalah dengan penyesuaian pada setiap ukuran layar yang lebih kecil.

2. Cara kedua: Membuat menu sliding sehingga setiap submenu dapat tampil tanpa batas secara horisontal pada layar mobile/hape. Menu dapat digeser dari kanan ke kiri dan sebaliknya. Sepertinya saya telah membuat kedua tutorial diatas dalam blog ini.
Delete

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 sobat diatas saya akan memberikan solusinya dan saya harap itu akan cukup mewakili sobat sobat yang lain juga.
Perhatikan animated gift dibawah ini:
menu navigasi mobile horisontal sliding dan responsive
MENGAPA MENU NAVIGASI BLOG GAYA HORISONTAL PADA LAYAR HAPE?
Pilihan ini rasanya jarang sekali di ambil orang namun tetap bisa menjadi pilihan karena ia berbeda. Akan tetapi seperti terlihat pada jawaban saya:

Menilik kepada ukuran layar yang terbatas, ada dua cara yang dapat kita lakukan agar menu navigasi pada hape tetap terlihat "horisontal" daripada "dropdown vertikal"

1. cara pertama: Menampilkan hanya 3 menu pada bar navigasi, namun salah satu atau semua menu memiliki opsi menu "dropdown" Saya melihat ini sedikit bermasalah dengan penyesuaian pada setiap ukuran layar.

2. Cara kedua: Membuat menu sliding sehingga setiap submenu dapat tampil tanpa batas secara horisontal. Menu dapat digeser dari kanan ke kiri dan sebaliknya. .......

Saya akan menjelaskan teknik membuat menu navigasi "cara kedua" karena:
  1. Mudah dibuat
  2. Hanya menggunakan HTML, CSS
  3. Tidak menggunakan JavaScript
  4. Benar benar pure horisontal sliding
  5. Bisa diterapkan ke template default (bawaan) model lama dan model baru blogspot
Fiturnya:
  1. Fixed Navigasi, artinya biarpun konten sobat scroll ke atas dan kebawah menu navigasi akan tetap terlihat keberadaannya diatas header.
  2. Warna mudah diganti sesuai keinginan bahkan jika sobat 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 sobat robah sendiri jika sobat 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>
Sobat bisa mengganti setiap tagar ('#about') dengan link blog daripada konten yang sobat 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.

Lihat DEMO

www.editblogtema.net

Bagikan (share):

No comments:

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan