Sangat mudah kok membuat menu navigasi untuk template bawaan blogger

Serial Tutorial khusus:
untuk diterapkan ke template bawaan

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:
  • 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!

4 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak