AdelinaSasa

Privacy Perihal kami Coba Template kami
×
Skip to main content

Dua cara gampang membuat menu navigasi untuk tampilan mobile blogspot

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

Comments

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

    ReplyDelete

Post a Comment

Popular Minggu ini:

TAHUKAH KAMU BEDANYA iPhone BEKAS JEPANG DENGAN SINGAPORE?

Pernah dengar Rumor iPhone rakitan Jepang dan Singapore?
Terutama anda yang domisili di batam yang masih sebagai "sorganya" elektronik, kali ini khusus seken. Dari hasil pantauan saya dilapangan peminat ponsel pintar bekas semakin meningkat terutama iPhone. Well, anda datang ketempat yang benar: BATAM.

Harga sebuah iPhone 5, 5c seken sekarang hanya berkisar 900 - satu jutaan disini. Kualitas tentu saja dijamin oleh toko penjual.

Mengapa batam? Karena Batam begitu dekat dengan singapore, hanya berjarak 45 menit (aktualnya hanya 25 menit, namun karena ada peraturan kecepatan di laut perbatasan dalam kecepatan tertentu maka dipatoklah 45 menit) perjalanan santai naik ferry laut, banyak celah dan peluang bisnis, salah satunya adalah bisnis ponsel bekas ini. Jangan anda remehkan ya, omsetnya bisa mencapai ratusan juta rupiah perbulan.  Kembali kepada topik: Perbedaan iPhone seken asal Jepang dan singapore.
Secara fisik, fitur dan kemampuan tidak ada perbedaan yang essensial. Nam…

APA BEDA SONY XPERIA ZR DOCOMO DENGAN GLOBAL?

Di Indonesia terutama di Batam sedang diserbu oleh produk hape bekas besutan sony keluarga xperia, saya juga tidak mengerti mengapa seken hape ini bisa sampai banjir di negara kita yang seluas ini, kalau mau dibilang produk hape ini sudah terbilang lawas di rilis dikisaran waktu 2013 - 2015, namun speknya masih terbilang bagus, dengan kamera beresolusi 13 - 20,7 Megapixel RAM 2GB, ruang simpan yang cukup lega dikisaran 8 - 32GB, tentu sangat menarik apalagi (kalau di Batam) harganya sangat murah berkisar antara RP. 550.000,- hingga RP.800ribuan, sangat terjangkau. Dan penjualnya memberikan garansi toko, bisa juga dibeli secara online, (kamu bisa mencari nama nama toko di Facebook seperti: Putra siregar seken singapore, atau bang Juju karena nama nama ini sudah terjamin kredibilitas bisnis mereka di Batam, Putra siregar bahkan telah memiliki beberapa cabang, Pekanbaru, Jakarta, Bali dll)

Satu hal yang kamu harus tahu: baik docomo maupun global keduanya sama sama asli besutan Sony, sama…

5 SIGNS WHY YOU ARE GENIUS

IF YOU CAN USE YOUR SMARTPHONE BY RIGHT when you confuse what shall be bought a laptop or a smartphone? Just consider the bugdet that you have for now, then I guess you will buying a phone, Am I right?  But why? Because with a smarthphone you can call your mom by dial her number, or you can texting your friends and send them some messages, so many fun in just one hand. Further more a phone does have networking capacity as laptop does have, so you can also chat with your friends through the internet.
Oh yes! I can't count how many times you can use it for get pictures with your friends and send them into social media like Facebook, IG, and GPlus? That are the ordinary people way to use their phones.

Why we call you are genius one is when you can use your smartphone more than a phone. You can use it for some productivity work such as: Blogging, support working, support learning, and for some excercises. When you so curious, here we go:

Signs 1. BLOGGING
You can use your smartphone fo…