ads here

MEMBUAT MENU NAVIGASI UNTUK TEMPLATE BAWAAN BLOGGER ITU SANGATLAH MUDAH

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!

Contoh Menu Navigasi Responsive

Cobalah anda ganti melihatnya pada layar kecil atau layar yang lebih besar untuk melihat efeknya
.
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!


Comments

Post a Comment

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik