AdelinaSasa

Dua cara gampang membuat menu navigasi untuk tampilan mobile blogspot

2 trik membuat menu navigasi mobile untuk blogger blogspot!

AvatarOleh:
Menu navigasi blogspot yang mobile dan responsive
menu navigasi
Zaman mobile, data menunjukan sudah semakin banyak para blogger generasi Z yang ngeblognya pakai mobile alias hape, ya terang aja gagdet mobile ini semakin lama semakin mumpuni: Jeroannya semakin kuat, layarnya semakin lebar karena bezelnya sudah dihilangkan. Masuk akal kalau ngeblog itu sekarang ini sudah mirip melakukan kegiatan medsos saja layaknya baik dari segi kemudahan UX (user experience) hingga UI (User Interface) yang semakin memanjakan pengguna.

Tapi untuk ngeblog kita masih dihadapkan kepada urusan tema atau template. Seperti yang teman teman sudah ketahui, template zamannya zen-Z itu wajib mobile friendly, so bukan sekedar responsive doang ya...Nah blogger belum meningkatkan UI dan UX untuk urusan yang satu ini coba bandingkan sama wordpress tinggal lakukan di pengaturan kita sudah bisa membentuk tema yang mobile dengan Manu navigasi yang ramah tamah terhadap pengunjung. Oh oce, maklum Google sibuk tapi ada untungnya buat pelajar seperti aku, jadi belajar mendesain tema walaupun manual ya lumayanlah.
Oke, mari kita mulai tutorialnya:

1. Navigasi mobile gaya vertikal:
Menu mobile gaya vertikal
Menu navigasi mobile gaya vertikal

Lihat DEMO
Bentuknya adalah tombol navigasi yang memiliki menu hamburger atau tiga balok sebagai pembukanya. Jika tombol ini diklik akan bermunculan sub-menu vertikal kebawah atau dropdwon.
Cara membuatnya: Siapkan template bawaan blogspot yang akan tema teman jadikan template ngeblog nantinya.

  1. Masuk kepengaturan blogger
  2. pilih tema atau template
  3. Pilih edit HTML

MENAMBAHKAN CSS

Di halaman editor HTML teman teman cari kode </head> copy dan letakan kode berikut tepat diatasnya:

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #333;
color: white;
}
</style>

MENAMBAHKAN HTML

Masih halaman editor HTML teman teman cari kode <body> copy dan letakan kode berikut tepat diatasnya atau letakan saja dibawah kode </head>:

<!-- digunakan untuk smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="/" class="active">Nama Blog</a>
<div id="myLinks">
<a href="#berita">Berita</a>
<a href="#kontak">Hubungi</a>
<a href="#perihal">Perihal</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- selesai smartphone / tablet look -->

MENAMBAHKAN JavaScript

Masih halaman editor HTML teman teman cari kode </body> copy dan letakan kode berikut tepat diatasnya:
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Selesai SAVE TEMPLATE. Gaya atau style diatas amat di rekomendasikan karena sekecil apapun ukuran layar hape dia pasti akan menyesuaikan.

2. Navigasi mobile gaya horisontal:
Menu navigasi mobile gaya horisontal
Menu navigasi mobile gaya horisontal

Lihat DEMO
Bentuknya adalah tombol navigasi yang memiliki menu hamburger atau tiga balok sebagai pembukanya. Jika tombol ini diklik akan bermunculan sub-menu horisontal berjajar atau inline.

Untuk ukuran ponsel 5 inch keatas menu navigasi model satu ini juga keren sekali teman teman, cara membuatnya juga sama hanya kode kodenya saja yang di robah. Menurut aku menu mobile ini sangat cocok buat tablet ukuran 7 inchi keatas.
Menunya akan muncul setelah tombol menu utamannya diklik.
Cara membuatnya: Siapkan template bawaan blogspot yang akan tema teman jadikan template ngeblog nantinya.

  1. Masuk kepengaturan blogger
  2. pilih tema atau template
  3. Pilih edit HTML

MENAMBAHKAN CSS

Di halaman editor HTML teman teman cari kode </head> copy dan letakan kode berikut tepat diatasnya:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
float: left;
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a.icon {
float: right;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #333;
color: white;
}
</style>

MENAMBAHKAN HTML

Masih halaman editor HTML teman teman cari kode <body> copy dan letakan kode berikut tepat diatasnya atau letakan saja dibawah kode </head>:

<!-- Mulai navigasi smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Judul Blog</a>
<div id="myLinks">
<a href="#Berita">Berita</a>
<a href="#Kontak">Kontak</a>
<a href="#perihal">Perihal</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- Berakhir Navigasi smartphone / tablet -->
</div>

MENAMBAHKAN JavaScript

Masih halaman editor HTML teman teman cari kode </body> copy dan letakan kode berikut tepat diatasnya:
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Selesai dan SAVE template

Demikianlah 2 cara membuat menu navigasi yang sangat mobile friendly. Ayolah jangan bertahan di zaman "old" Google sudah tidak menyukainya lagi.

Mengapa harus mobile dan mobile, ya teman teman sudah tahulah. Perangkat pengakses internet zaman ini adalah hape yang jumlahnya bermilyar milyar di atas dunia yang fana ini. 

Artinya itu adalah pasar, pasar adalah kegiatan bisnis. Bisnis adalah uang. Kalau pakai desktop itu sudah zaman "old" zaman jadul. Paling banter sekarang orang masih pakai laptop. Tapi pasar mereka terus menyusut, aku gak akan membahas masalah ini disini. 

www.editblogtema.net

Artikel Terkaitnya:

3 comments

  1. Eh kayak pernah baca postingan ini di blog lain ya, yang sering berbagi tips ngeblog :)

    ReplyDelete
  2. Solusi kak menunya tidak bisa keluar ketika di klik.

    ReplyDelete
    Replies
    1. berarti ada maslah pada bagian Javascriptnya, coba periksa ulang kembali

      Delete

Home

Labels

Abadi account action addicted adobe photoshop fix adobe photoshop mix adobe photoshop touch adsense agama AI akal alam Albert Einstein alexander the great. Allien Amerika AMP anak Androd android angkasa angkasa luar animal animal planet animasi antithieft aplikasi hebat Appe apple Apple Face ID Artifical Intelligent artificial inteligent artikel artis asesories asus atheis autoCAD autodidact awas Ayu Ting Ting badai bahasa bahasa. bakteri batam BBM beginning benar bencana berbagi berita berjalan berlari bijaksana bing bisnis kecil black hole Blackberry blackberry Messenger blog blogger blogger logo blogger moblie blogging bluetooth keyboard bluetooth mouse bocor bot BPJS buku bully buruh burung langka business camera cat cellphone ceramah cerita charles Darwin chat China cinta classic Cloud cloud drive contempo contempohybrid coolest covid 19 CSS curhat custom ROM cybercrime Darwin dasbor Deep mind Demo desain Design dewa dilema docomo dollar amerika download DPR RI drama Drive DSLR dunia earn money editblogtema Education ekonomi Email emas endorse enggang English entertainment error etika evolusi Facebook fakta fanpage favicon feature fiksi fiksi sains filem filsafat finansial fisika flashdisk Florence Nightingle Florida food. forbes freckles Free friendship fun futuristik G+ Gadget Gagdet Galaxy Mega 6.3 Galaxy note 10.1 2014 edition gambir serawak game gaya hidup genetika Genius GENOM girl global gojek gold Google google adsense Google Rewards Opinion google%20drive google+ grafis Hack hacker handphone hantu hapeseken hari tua harimau harun yahya harvey heart secret hebat help me hewan hiburan hoax Hobit. hollywood horor HTML http://justdelete.me Huawei P20 pro hubungan hujatan hukum human humanbeing humor Hutan Lindung ICBM iis sugianto ilmuwan immortality impian Indosat infinity war iniJawabannya! insiden insipirasi intelligent Internasional internet invansion investment iOS iOS 11 iOS 8 iPad iPad Air ipad pro iphone iPhone 6 iPhone Case iPhone X iPhone Xs iphone. iPhoneX islam Israel isu sara jailbreak Jaime Sanjuan Ocabo Jalan Tikus janji Javascript Jenius Jerusalem jitu Job Jokowi Jokowi aja bekerja keras jokowi aja kreatif Jonru Ginting judi kamera kamera hape kantor Kaskus keabadian keadilan keamanan Kebenaran kecanduan kecantikan kecelakaan kecerdasan buatan kehidupan keluarga kemajuan kemanan kemiskinan kemudahan hidup kenyamanan kertas keruntuhan kesetiaan keyakinan keyboard external PC keyboard fisik tablet keyboard fisik tambahan keywords khairil anwar khotbah kiamat kisah klasik kode koding koes plus komedi komputer Konsipirasi konten kotak pandora kreatif kriminal krisis kristen kucing kuyang lagu lapangan kerja laptop leisure Lenovo Life lifehack lingkungan listrik logika logitech LOGO loneliness Lotgitech lowongan luar lucu MacBook madonna magis make up malam minggu Malaysia manipulatif manusia masa depan masa lalu mati tertawa media medis medsos membela diri mencari uang menggambar mengintip rahasia menulis meretas Messenger Micorosft Office Microsoft microsoft office microsoft%20office milk lover miras mitos mobile modal motivasi motivation motivation. movie Muhammad murai batu musik myths naluri NASA navigasi blogspot template network new news ngeblog Nokia X nuklir nyanyian nyata obat kuat Office office%20365 old time job online operating system oppo organisme original Otodidak pademi pahlawan pamali Pandora panduan paradox password PC pegawai negeri pekerja pekerjaan pemrograman pemula pencipta pendidikan pengarang penghasilan pension pensiun penulis perang perbankan perekamLayar perkawinan phablet phising PHK phone phone camera photographi phtography pilihan hidup pilosofi Play Store politik ponsel postingan potografer powered by blogger prabowo subianto prediksi teknologi premium pria pribadi prilaku privasi produktivitas programming promosi prostitusi psikologi Puasa publisher Puisi qoute Raffi Ahmad rahasia ramadhan rano karno rasialis relativitas reliji remaja renungan responsive review rhoma irama riba Robot ROM. stock ROM ruang waktu rumah sakit Rusia Safir screen sahabat sains salah Samsung samsung galaxy foldable Samsung Galaxy note 2014 Samsung S8 samsung tabS2 screenRecorder scy-fi SECRET secrets sejarah seken selebritis medsos self learning self-confident semesta sentinel SEO simalangkama simple singularity smarphone smartohone smartphone Smartwatch social song sony sosial spam spoiler Spy Stephen Hawking steve job strategi struktur success sukses suku terasing supernatural tablet tablet 7" TabletAndroid takhyul taktik tantangan target tauhid technic Technology teknik teknologi teknologi hoax telkomsel tema template tenaga kerja teologi teori terbaik theme thomas alpha edison Time traveller tips toko online Tokoh tourism town tragedi trik triks troubleshooting Tuhan Tutorial Tutorial. tweeter twiteer uang UFO ultrabook unggas langka United States universe usaha video viral virtual vivo waktu website widget Windows 8 Windows PC wisata women WORDPRESS xiomi xml xperia Yahoo yahudi

Get Updates