November 09, 2019

BEBERAPA TRIK SEDERHANA HTML DAN CSS YANG DAPAT ANDA TERAPKAN PADA TEMPLATE BLOGGER

working with CSS, HTML
working with CSS, HTML
Dalam beberapa kesempatan saya telah menulis tentang trik membuat menu navigasi di halaman ini. Kali ini saya ingin berbagai trik HTML dan CSS yang mungkin berguna sebagai elemen tambahan atau bahkan elemen penting pada template blogger.

MEMBUAT KOTAK PENCARIAN BERANIMASI
Klik kotak pencarian di bawah ini:
Kotak pencarian akan melebar bukan? Itulah yang saya maksud dengan  CSS style, cara penulisannya di dalam template adalah:

1. Tambahkan CSS
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Pada pengaturan template terbaru klik titik tiga 
  4. Akan muncul menu seperti pada gambar:
  5. Klik atau pilih "Edit HTML" 
  6. Pada halaman editor HTML yang telah terbuka cari kode penutup </head>  dan letakan kode CSS berikut tepat diatasnya:
<style>
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>
 2. Tambahkan HTML
Masih di dalam halaman editor HTML blogger, letakan kode berikut di bawah </head>:
<form>
<input type="text" placeholder="Search.." name="search">
</form>
Save template .

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:
Klik menu untuk merubahnya menjadi "X":

Cara menerapkannya adalah sama dengan trik di atas yakni bagian CSSnya diatas </head>:
<style>
.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>
Dan bagian HTML berikut diletakan dibawah </head> atau <body>:
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Lalu disusul kode JS berikut harus diletakan di atas tag kode penutup </body> :
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
Save hasilnya.

I am a student of Senior High School (SMA) I am living in Bandar Lampung, Selalu tertarik dengan HTML, sedang belajar Javascript, python dan C++