Trend desain web mulai tahun 2020 ke 2021 sudah pasti bergeser dari tahun tahun sebelumnya, berubah dan penuh dengan penampakan baru. Mereka bilang sih dinamika dunia website. Banyak blogger baru misalnya meninggalkan halaman dengan penampakan sidebar, meninggalkan cara menu navigasi dengan dropdown, lalu mengikuti syle halaman muka (homepage) bergaya grid masonry dll.
Ada trend membuat halaman tampak acak dan tidak teratur, ada trend menyederhanakan tampilan halaman dengan gaya minimalis namun memukau karena pada saat menu yang hanya satu satunya di buka ternyata memberikan panduan super lengkap.
Saya ingin berbagi membuat menu blog sederhana dengan mengklik menu hamburger untuk menampilkan menu menu di bilah samping halaman awal dan halaman konten blog. Contoh tampilannya:
See the Pen zYKyEGd by sufyan (@sufyan33) on CodePen.
Klik Menu hamburger warna hijau (green) di atas untuk melihat menu yang saya sembunyikan di sidebar dan Anda dapat menutupnya dengan mengklik tombol tutup silang warna merah. Trik ini sangat mudah di terapkan ke dalam halaman template blogger blogspot.Di dalam HTML kodenya akan tampak sebagai berikut:
1. CSS
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #f0f0f0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #333;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: -0.1;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: red;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #f0f0f0;
color: #00CC00;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #f0f0f0;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* (Pada tampilan pada layar yang lebih kecil di mana ukuran tinggi kurang dari 450px, kita dapat merubah pengaturan CSS side navigasi misalnya dengan cara mengurangi padding dan mengecilkan ukuran huruf) */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
.avatar{vertical-align:middle;width:50px;height:50px;border: none;color:transparent;border-radius:50%;margin-bottom:0px;margin-top:-10px;margin-left:33.33px;}
.avatar{background-color:pink;padding-top:0.9px;padding-bottom:1px;padding-left:0.9px;padding-right:0.9px;float:center;}
.avatar{animation: shake 2.5s;background-color:pink;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
Kode CSS styling di atas di letakan di atas tag penutup </head>
</head>
<body>
2. HTML MENU
<img alt='Avatar' class='avatar' img src='link avatar anda' itemprop='image' width='50px'/>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Perihal</a>
<a href="#">Privasi</a>
<a href="#">Layanan</a>
<a href="#">Email</a>
</div>
Kode HTML di atas di letakan di bawah kode <body>
3. HTML TOMBOL ACTION
<button class="openbtn" onclick="openNav()"><h1>☰</h1></button>
</div>
kode HTML buat tombol di letakan di bawah atau setelah tag <body>
4. JAVASCRIPT
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
Javascript di atas di letakan di atas kode </body>
</body>
</html>
Trik sidenav ini telah kami terapkan ke dalam template editblogtema sendiri.
Dimana belajarny? Ya melalui w3school. Tapi dengan cara mengutak atik dan menulis ulang kode kode yang telah ada melalui halaman editor codepen milik Admin blog ini.
Adelina Sofyan
contributor biasanya hanya menulis artikel pendek
Jaey berkata:
BalasHapusKalau cara bikin kotak yg kyk begitu gimana gan, itu kotak yg tempat naroh kode ky yg diposting itu gimana, iya yg itu.. itu, iya gimana caranya..
Jawab: itu menggunakan codepen yang di embed langsung ke dalam postingan melaui opsi HTML.
Untuk menggunakannya harus daftar codepen terlebih dulu.
Aku kebetulan mau posting caranya karena embed codepen di html itu lebih di rekomendasikan di blogspot caranya sikit beda sama wordpress yang berbasis php..