 |
| working with CSS, HTML |
MEMBUAT KOTAK PENCARIAN BERANIMASI
Klik kotak pencarian di bawah ini:
1. Tambahkan CSS
- Masuk ke pengaturan blogger
- Pilih Tema
- Pada pengaturan template terbaru klik titik tiga ⋮
- Akan muncul menu seperti pada gambar:
- Klik atau pilih "Edit HTML"
- Pada halaman editor HTML yang telah terbuka cari kode penutup </head> dan letakan kode CSS berikut tepat diatasnya:
<style>2. Tambahkan HTML
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #FF0000;
border-radius: 10px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
Masih di dalam halaman editor HTML blogger, letakan kode berikut di bawah </head>:
<form>Save template .
<input type="text" placeholder="Search.." name="search">
</form>
MEMBUAT ELEMEN TOMBOL OPEN/CLOSE ATAU TUTUP BUKA BERANIMASI
Ini bisa di terapkan untuk membuka dan menutup menu navigasi blog, coba tekan tombol menu hamburger atau tiga garis bersusun di bawah ini, dan juga klik tanda 'X' jika sudah selesai:
Cara menerapkannya adalah sama dengan trik di atas yakni bagian CSSnya diatas </head>:
<style>Dan bagian HTML berikut diletakan dibawah </head> atau <body>:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #FF0000;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
<div class="container" onclick="myFunction(this)">Lalu disusul kode JS berikut harus diletakan di atas tag kode penutup </body> :
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>Save hasilnya.
function myFunction(x) {
x.classList.toggle("change");
}
</script>