kami telah memposting banyak perihal tentang cara pembuatan navbar atau menu navigasi di dalam blog ini. Diantaranya:
- Menu navigasi responsif (topnav) dengan dropdown plus tombol pencarian diujungnya. Model navigasi ini banyak dipergunakan, diantaranya oleh template template solaris, viomaz dll. Navigasinya bersifat fixed.
- Megamenu.
- Mobile Menu.
- Sidebar Menu.
Namun kali ini yang spesial bagi saya adalah, untuk kali pertama membuat konten tutorial sepenuhnya melalui hape layar 5 inchi ternyata mudah banget kalau sudah terbiasa dan tau triknya.
Saya akan membagikan pengalaman dan trik trik mudah melakukan pengeditan kode kode HTML melalui halaman HTML Blogger dilain kesempatan di halaman Blog ini.
Kali ini kita kembali akan mencoba membuat menu navigasi sidebar kanan beranimasi dan menerpkannya pada blogger. Menu ini terbilang ringan, sederhana, responsive dan mobile. Kalian dapat mengklik menu di bawah untuk melihat hasilnya:
Contoh navigasi sidebar beranimasi
Klik elemen berikut di bawah untuk membuka menu sidebar.
☰ open- Diletakan di kanan halaman blog alih alih di atas bagian header pada umumnya.
- Responsif.
- Mobile friendly.
- Sederhana dan cepat.
Cara Penerapan:
- Masuk ke dasbor
- Pilih tema
- Pilih Edit HTML
1 Membuat pengaturan CSS.
Kita tahu CSS berguna untuk mengatur dan membentuk tampilan suatu elemen HTML. Contohnya Ia memberi warna pada huruf dan latar, dia membuat jarak dan pembatas antara elemen HTML satu dengan yang lain.
Dengan adanya CSS, tag HTML yang sederhana dapat diubah sehingga tampilan laman website pun menjadi terlihat lebih menarik dan efisien.
Di dalam halaman editor HTML cari kode tag penutup </head> letakan kode css berikut tepat diatasnya:
<style>body {font-family: "Lato", sans-serif;}.sidenav {height: 100%;width: 0;position: fixed;z-index: 999;top: 0;left: 0;background-color: #0101DF;overflow-x: hidden;transition: 0.5s;padding-top: 60px;}.sidenav a {padding: 8px 8px 8px 32px;text-decoration: none;font-size: 25px;color: #fff;display: block;transition: 0.3s;}.sidenav a:hover {color: #f1f1f1;}.sidenav .closebtn {position: absolute;top: 0;right: 25px;font-size: 36px;margin-left: 50px;}@media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;}}</style>
2. Menambahkan HTML
Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. Dan pada kasus kita sekarang ini kita sedang membuat sebuah navigasi menu di sisi kanan halaman blog.Kalian dapat memilih dua cara untuk meletakan kode HTML ini ke dalam template berflatform Blogger. Bisa ditempatkan di bawah kode </head> atau dibawah kode <body> akan tetapi terkadang kode body berbeda penulisannya di dalam jenis template blogger yang berbeda, lebih aman jika menempatkannya di bawah kode </head> saja. Berikut kodenya:
<div class="sidenav" id="mySidenav"><a class="closebtn" href="javascript:void(0)" onclick="closeNav()">×</a><a href="#">Perihal editblogtema</a><a href="#">produk kami</a><a href="#">Klient kami</a><a href="#">Kontak kami</a></div><span onclick="openNav()" style="cursor: pointer; font-size: 30px;">☰ open</span>
3. Memasang JavaScript
Sebagai bahasa fungsional Javascript mengimplementasikan fungsi kelas pertama (first class function). Fungsi dapat disimpan dalam variabel, dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk fungsi lainnya. Tetapi dengan javascript desainer dapat menghasilkan suatu karya yang elegan dan indah.Aduh rumit ya statemen di atas, jangankan kalian jika masih awam, saya saja baru mengerti bahasa fungsional ini setelah mempraktikannya. Mari kita lanjutkan saja ke praktik langsung.
Masih di dalam halaman Editor HTML Blogger, cari kode penutup tag </body> dan letakan kode Javascript berikut diatasnya:
<script>function openNav() {document.getElementById("mySidenav").style.width = "250px";}function closeNav() {document.getElementById("mySidenav").style.width = "0";}</script>
Save template.
Jangan lupa next saya akan memberikan tips dan triks berdasarkan pengalaman menggunakan halaman HTML Blogger melalui ponsel. Lumayan kan, karena dengan cara demikian kalian bisa memanfaatkan ponsel kalian buat mengelola blog dan halaman website, terutama membuat konten konten yang menarik.
Baca Juga:
CARA MEMBUAT MENU NAVIGASI BLOG FIXED PLUS TOMBOL PENCARIAN
Gak perlu laptop, tinggal biasakan saja. Contohnya konten ini berisikan elemen kode kode CSS style, HTML dan Javascript, ditulis melalui dua opsi sekaligus yakni opsi 'compose' dan opsi 'HTML' </>. Saya tulis melalui hape saja. Kalau tutorial saya pergunakan tablet dengan keyboard dan mouse atau laptop. Sekarang terasa banget bawa bawa barang gituan jadi ribet.
Lebih baik ponsel saja dan merasakan dunia dalam genggaman...
Padahal dulu hanya menggunakan ponsel jika menulis artikel artikel ringan..
Kita dapat belajar bersama sama melalui halaman situs ini. Semuanya gratis, termasuk templat template hasil praktikumnya. Ayo tunggu apalagi mari belajar bersama Anissa...
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!
Share: