Serial Tutorial khusus:
Lihat Demo Menu Navigasi Responsive dibawah ini, coba sentuh untuk mengeksplorasinya, menurut anda bagaimana cara membuatnya? Mudah sekali hanya dengan menerapkan kode kode HTML,CSS dan JS dasar!
Cara membuatnya adalah melalui pengaturan blogger. Tapi sebaiknya pastikan terlebih dahulu anda telah memodifikasi template bawaan blogger menjadi responsive. Walaupun menu navigasi ini bisa saja di terapkan kedalam template Contempo misalnya, namun saya lebih menganjurkan anda menerapkannya kedalam tema klasik. Untuk membuat tema klasik menjadi responsive silahkan cari artikelnya di pencarian blog ini atau di internet.
LANGKAH PERTAMA:
LANGKAH KEDUA:
Cara membuatnya adalah melalui pengaturan blogger. Tapi sebaiknya pastikan terlebih dahulu anda telah memodifikasi template bawaan blogger menjadi responsive. Walaupun menu navigasi ini bisa saja di terapkan kedalam template Contempo misalnya, namun saya lebih menganjurkan anda menerapkannya kedalam tema klasik. Untuk membuat tema klasik menjadi responsive silahkan cari artikelnya di pencarian blog ini atau di internet.
LANGKAH PERTAMA:
- Masuk ke pengaturan blogger
- Pilih tema atau theme
- Pilih editHTL
Cari kode </head> lalu letakan kode dibawah ini tepat diatasnya:
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #6495ED;
color: black;
}
.active {
background-color: #000000;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
LANGKAH KEDUA:
Masih pada opsi HTML cari kode </header> dan letakan kode dibawah ini di atasnya:
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Beranda</a>
<a href="#news">Berita</a>
<a href="#contact">kontak</a>
<a href="#about">Perihal</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
LANGKAH KETIGA:
Cari kode </body> dan letakan kode dibawah ini diatasnya:
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Save tema.
Dan cobalah lakukan oleh anda sendiri dengan cara membuat blog percobaan, jika berhasil artinya anda sedang memulai sebuah langkah penting dalam mengedit dan bahkan membuat tema blogger anda sendiri, ayo coba!
Tags
navigasi menu blog
Kebetulan lagi nyari informasi ini. Terima kasih.
BalasHapussama sama Dyah
Hapusdas
BalasHapusDas kapitalis?
Hapus