Membuat dan menambahkan ikon MENU BAR ke header blog sebenarnya mudah. Menu bar itu bagi blog ibarat penerima tamu, semakin ramah semakin banyak tamu yang akan datang. Salah satu bentuk navigasi menu blog yang paling ramah, simple dan tidak sombong adalah bentuk menu bar. Pernahkan kita terpikir bagaimana cara desainer web membuatnya?
Awalnya hanya bentuk tiga baris bar, tapi ketika di klik menjadi "X"
Ternyata kita dapat membuatnya dengan 3 elemen web berikut dengan mudah:
- Masuk kepengaturan blogger
- Pilih tataletak
- Pilih tema atau theme
- Pilih EditHTML
Cara mencari kode tertentu cukup tekan ctrl+f pada keyboard dan masukan kode kedalam kotak pencarian tekan "enter" maka kode pencarian yang kita cari akan muncul dengan sorotan berwarna kuning.
1. TAMBAHKAN HTML:
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Caranya letakan kode tersebut di atas </header>
2. TAMBAHKAN CSS:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
Caranya bisa dengan meletakannya di atas atau sebelum kode ]]></b:skin>
3. TAMBAHKAN JS (JavaScript)
function myFunction(x) {
x.classList.toggle("change");
}
Cara yang benar meletakan js kedalam template adalah dengan terlebih dahulu membuka kode JS dengan <script> dan tutup dengan </script> jadi bentuknya akan menjadi sebagai berikut:
<script>function myFunction(x) {
x.classList.toggle("change");
}</script>
Selanjutnya meletakan kode JS yang benar adalah sesudah kode : </b:template-skin>
Lihat demo:
DEMO
Next time kami akan menjelaskan bagaimana cara nya membuat menu ikon tersebut aktip dan dapat membuka menu navigasi pada blog, tetapi sebaiknya anda mempelajari bagaimana caranya membuat template blog bawaan menjadi responsive dan mobile friendy terlebih dahulu melalui blog kami ini.