Langsung ke konten utama

Postingan

Menampilkan postingan dengan label sidenav

Cara membuat Sidenav menu blogger murni CSS beranimasi

Ini trik yang cantik! membuat halaman blog menjadi minimalis namun eyecatching, dan terasa intuitif karena ia akan menjadi tampak lebih 'hidup' dengan efek animasi. Karena tidak melibatkan javascript menu ini juga ringan, simpel dan baiklah kita dapat menyimpulkannya: Minimalis Beranimasi Murni CSS Mudah di terapkan ke dalam template blogger terbaru. DEMO Cara memasang: Masuk ke dasbor pengaturan blogger Cari kode Tema Pilih edit HTML 1. CSS Tentu saja kode CSSnya panjang karena harus membentuk sedikit efek animasi terutama buat menu hamburgernya. Jadi copy seluruh kode CSS berikut di bawah ini. Di halaman editor HTML template blogger cari kode </head> dan letakan kode CSS berikut di atasnya: <style>  .main p { font-size: 24px; text-align: center; margin: 50px;        z-index:999; } #container {   position: relative;   display: block;   width: 100%;   height: 100%;        z-index:999; } .nav-menu-button {   display: block;   position: fixed;   top: 0;   left:

Cara membuat navigasi bilah samping style editblogtema

Ide layout template halaman ini memang dari saya 😀😀😀...jadi wajar dong saya buka trik pembuatannya. Itu gunanya bekerja sebagai tim, segala pekerjaan dapat dilakukan dengan mudah. Segala masalah dapat di pecahkan dengan lebih cepat, bukan? Full DEMO Side navbar, atau navigasi bilah samping biasanya memang di sembunyikan guna menghemat ruang untuk konten utama. Ia bisa sewaktu sewaktu di tampilkan dengan mudah melalui tombol menu navigasi guna memudahkan pengunjung dalam mencari konten tertentu di dalam halaman blog kita. Silhakan klik tombol 'full demo' di atas. Jadi manfaat menu bilah samping pada halaman blog adalah: Memudahkan navigasi bagi pengunjung dalam mencari konten tertentu. Menghemat ruang konten utama agar tampak lebih simpel dan bersih. Cocok untuk menjadi navigasi blog mobile Fiturnya: Tombol menu hamburger, cialah, ini benar benar self minded banget bagi saya, alih alih menggunakan garis susun tiga sebagai ikonnya hamburger menu. Saya memilih image hamburger b

Cara membuat sidemenu sidebar dengan tombol hamburger pada blogspot

Seringkali menu membuka dan menutup Navigasi pada blogger di sebut sebagai Hamburger menu, memang sih tidak mirip sama hamburger malahan lebih mirip garis garis bersusun tiga atau tiga garis bersusun, beneran tapi yang kita bicarakan adalah perihal pembuatannya dengan kode kode sbb: CSS HTML JavaScript Trik ini dapat diterapkan ke hampir semua template bawaan blogspot. Cara pemadangannya adalah sebagai berikut, namun terlebih dahulu masuk ke pengaturan blogger: Pilih Tema Pilih Edit HTML 1. Tambahkan CSS Pada halaman editor HTML cari kode </head> lalu tambahkan kode berikut tepat diatasnya: <style> body { font-family: "Lato", sans-serif; transition: background-color .5s; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 100; top: 0; left: 0; background-color: blue; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #fff;

Copyright© EDITBLOGTEMA . All rights reserved.