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

Popular posts from this blog

INI DIA 9 SITUS TEMPAT BELAJAR KODING TERBAIK

Selagi kalian masih muda, dan kalian terbiasa mengoperasikan komputer: Laptop, Desktop, iPad, Tablet dan bahkan Smart-phone, maka sesungguhnya kalian memiliki kesempatan yang sangat besar untuk tetap bisa belajar layaknya sekolah formal namun melalui jalan online!
Belajar Online? Mengapa tidak? Tidak ada yang salah dengan belajar online. Kalau bisnis online terbukti sukses, belanja online juga bisa, mengapa harus tertutup kesempatan belajar online? Tidak banyak alasan untuk menolaknya, sekalipun masih ada orang berpikirnya begini: Tidak afdol kalau belajar online, harus melalui guru langsung.

Itu namanya paradigma lama, saya belajar secara online, tanpa guru dan walaupun belum terlalu menguasai pelajaran koding seperti yang telah saya targetkan, namun saya telah menguasai beberapa bahasa program web tanpa keluar uang sepeserpun selain hanya waktu dan quota internet. Saran saya jangan mempersulit diri kita sendiri dengan banyak alasan untuk tidak belajar. Hari segini bisnis saja tanpa at…

MENGAPA POWERED BY BLOGGER ITU PENTING BAGI GOOGLE?

Blogger menggunakan ikon, ikon yang dipergunakannya adalah tipe SVG, sebenarnya banyak jenis jenis ikon yang bisa kita pergunakan, misalnya yang paling populer adalah ikon font awsome, namun jika memilih menggunakan font awsome kita harus memasang script link eksternal ke dalam template blogger kita. Hal ini akan membebani loading atau kecepatan halaman blog saat dijalankan di internet.

Nah itulah sebabnya mengapa blogger secara default tidak menggunakan font awsome yang cantik dan memiliki banyak ikon tersebut. Blogger secara default menggunakan SVG yang jauh lebih ringan, dapat berjalan pada semua browser utama.

Ikon pada atribusi dan kredit blogger adalah "trademark" special platform blogger, jadi tidaklah bijaksana menghapus ikon tersebut (walaupun Google tidak secara jelas melarangnya atau memperbolehkannya, meskipun template anda buat dari NOL. Mengapa? Alasannya adalah:
Anda tidak akan membuat template blogger kalau platform blogger itu sendiri tidak ada. Platform Blogge…

QUORA: PEKERJAAN PALING ENAK DAN SANTAI NAMUN GAJINYA BESAR

Quora adalah sebuah situs tempat bertanya dan menjawab: Dari sekian ton pertanyaan dan jawaban saya menemukan jawaban menggelitik seputar profesi anggota DPR dan Pegawai negeri, panasaran? Simak saja:

1. ANGGOTA DPR
Jawaban terbaik untuk pertanyaan ini tentu saja adalah pekerjaan mulia yang digawangi oleh para wakil rakyat Indonesia di gedung DPR-RI. Pekerjaan sebagai anggota DPR. Saya (Anissa) tergoda untuk mencontek langsung tulisan yang bersumber dari quora ini:

Gaji dan tunjangan tetap Gaji Pokok = Rp 4.200.000 Tunjangan Istri (10% GP) = Rp 420.000 Tunjangan Anak (2 anak x 2% GP) = Rp 168.000 Uang sidang / Paket = Rp 2.000.000 Tunjangan Jabatan = Rp 9.700.000 Tunjangan Beras Rp 30.090 per jiwa per bulan Tunjangan PPH pasal 21= Rp 2.699.813 Penerimaan lain:
Penerimaan lain Tunjangan Kehormatan: Rp 5.580.000 Tunjangan Komunikasi Intensif = Rp. 15.554.000 Tunjangan Peningkatan Fungsi Pengawasan dan Anggaran = Rp 3.750.000 Bantuan Langganan Listrik dan Telepon = Rp 7.700.000 Asisten Anggo…