Cara membuat navbar menu mobile vertikal di blogger

navbar untuk blogger mobile

Halo teman teman Otodidaker yang menakjubkan! Sekali lagi Selamat menjelang tahun baru 2020. Mari belajar koding dan menerapkannya ke dalam blog kalian yang mengagumkan. Blog blog dengan berbagai niche, berbagai warna warni, di tulis oleh orang orang yang memiliki imajinasi dan kecerdasan tinggi.

Blog blog sumber insipirasi.

Saya telah menulis banyak konten pada hari ini dan saya ingin menulis konten terakhir di penghujung tahun 2019 yang penuh kenangan, yakni sebuah panduan membuat navbar mobile. Mobile berarti lebih kecil daripada layar desktop dan laptop, bisa tablet ukuran 8 inchi, namun terutama smartphone atau ponsel.

Ada lho tutorial atau panduan bikinnya dan melalui w3school dan saya mencoba mengutak atiknya. Pada dasarnya koding itu tidaklah susah.

Contoh di bawah ini bukanlah gambar, akan tetapi sebundel kode HTML yang saya terapkan melalui opsi penulisan HTML, cobalah eksplorasi dengan mengklik tombol hamburger untuk menampilkan menu-menunya!

SBBS

Privasi blog konten berita kontak perihal

Tim:

Menu mobile vertikal

Sangat cocok untuk di pergunakan buat template blog mobile atau hape atau ponsel.
klik saja menu hamburger garis tiga lapis dalam lingkaran di ujung kanan navbar untuk melihat menu menunya.
Hamburger menu.
Designed By: Anissa Auliasari.

Baca juga serial artikel saya ya:

1. Cara membuat navbar blogger dengan menu dropdown
2. Cara membuat navbar blogger mirip situs CNN
3. Cara membuat navbar dengan menu gulir

Cara penerapan Navbar menu mobile adalah sebagai berikut:

1. CSS

Login ke Blogger.

1. Pilih blog untuk diperbarui.
2. Di menu sebelah kiri, klik Tema.
3. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
4. Cari kode </head>

Letakan kode CSS berikut tepat diatas kode </head>:

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #333;
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: #333;
display: block;
position: absolute;
right: 0;
top: 0;
heigt:40px;
}
.topnav a:hover {
background-color: transparent;
color: transparent;
}
.active {
background-color: #0000FF;
color: white;
}
svg {width:24px; height:24px}
svg path {fill:#ffffff}
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>

2. HTML

Letakan kode berikut tepat dibawah kode </head>:

 <!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">SBBS</a>
  <div id="myLinks">
    <a href="#privasi">Privasi</a>
    <a href="#blog">blog</a>
    <a href="#konten">konten</a>
    <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()">
    <svg>
    <path fill="#000000" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M6,7H18V9H6V7M6,11H18V13H6V11M6,15H18V17H6V15Z" />
</svg>
  </a>
</div>
<center><h2>Tim:</h2></center>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXGTDErRFmET4AK0RoYsNOuGMuhyphenhyphenzMnvws4G_rtByvaLgF8KbX754W6ZkFD-5j-MCL2IeFnRjuDL2PFUnMV4WzcuPuPMNOfuJc149o145KPhvKGjNDGA-9xPD5s39AYr3ia9bfmitI5x6z/s1600/sasa.web" alt="Avatar" class="avatar">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQs0MTrbtmfzSzOIXlnwqHg_oZNSwUAAigqh7glYnLTnrEdZzKaE8Z4rXel2WcAjOxYBClpAPFmtOQCA59YIuzsCOXFCCg1_us291Wr338Z_cGtBhL8iQ6X4P_toipO5eckbtz207lEmtO/s1600/20191215_110326.jpeg" alt="Avatar" class="avatar">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIOSrE18z-0I_nbZzuwwabuChUcUZTTETzAfdkCqytvugq8ASfWmv0h2QIgBOtaxvglRzbDetSxDq25vYjUOOU0VG0oqKGc-n0Yyr6h4XawT3grd6I0hukFM9G-hWp10BhRwtVfq0Yroq/s1600/adel.jpg" alt="Avatar" class="avatar"></center>
<!-- End smartphone / tablet look -->
</div>

3. Javascript

Terakhir letakan kode Javascript berikut ini tepat di atas kode </body>:

<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>

Save template. Selesai.

Sekali lagi kalian harus ingat, Trik ini saya utak atik dari halaman w3school, coba deh klik link berikut dan ingat, jika ingin melihat hasilnya jangan lupa klik 'RUN' di atas menu ya...Cobalah klik demo dibawah ini:

Cara membuat Navbar blogger mobile

Kalau kalian sudah klik 'RUN' tombol warna hijau akan tampil hasil pekerjaan saya seperti pada gambar berikut di bawah, kalian juga pasti akan bisa melakukan hal yang sama.