CARA MEMBUAT MENU NAVIGASI BLOG KEREN UNTUK TEMPLATE TERBARU BLOGGER

Template terbaru bisa di modifikasi dengan memberikannya tambahan elemen navbar custom yang responsif, mobile dan tentu saja sangat berguna dan tentu saja di samping menambahkan fungsi navigasi dengan dropdown, tampilan tambahan ini akan membuat template menjadi tampak jadi lebih premium.
notable template dengan navigasi responsif dan mobile
notable template dengan navigasi responsif dan mobile
Kalian dapat menerapkannya ke dalam template template terbaru seperti:
  1. Contempo
  2. Emporio
  3. Soho
  4. Notable
Atau template template default yang lebih tua.
Kode kode HTML yang dipergunakan dalam pembuatannya juga terbilang standar yang dapat di terima oleh halaman web HTML.

Mari kita mulai:

1. PASANG CSS

Login ke Blogger dan pilih template default terbaru.
  • Pilih blog untuk diperbarui.
  • Di menu sebelah kiri, klik Tema.
  • Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
  • Pada halaman editor HTML blogger yang telah terbuka: Cari kode </head>
Dan letakan kode CSS berikut tepat diatasnya:
<style>
body {margin:0;font-family:Arial}
.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;
}
.active {
background-color: #ff0000;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>

 2. PASANG HTML

Masih di dalam halaman editor HMTL cari kode </header> dan di atasnya ada kode </nav>. Posisinya sebagai berikut:
</nav>
</div>
</header>
Letakan kode berikut tepat di atas kode </nav>:
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Beranda</a>
<a href="#news">Privasi</a>
<a href="#contact">Kontak</a>
<div class="dropdown">
<button class="dropbtn">More🔻

</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">Download</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

3. PASAG JAVASCRIPT

Yang terakhir masih di dalam halaman editor HTML blogger, cari kode </body> dan letakan kode berikut tepat di atasnya:
<script>function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; }}</script>
Save template.

Navbar ini memiliki ciri ciri:
  • Responsif
  • Mobile friendly
  • Memiliki fitur dropdown untuk menampung lebih banyak menu yang dapat kalian tambahkan tanpa batas. 
Alasan saya tidak meletakan bagian HTML di atas atau di bawah tag <body> adalah hal yang sangat jelas: Saya ingin membiarkan bagian header tetap berperan sebagai struktur header h1 dan berada di posisi atas navbar, sehingga template tetap terstruktur dengan baik.

Navbar secara default akan mengikuti fitur 'sticky' karena posisinya masih di dalam  header, untuk menghilangkan sticky kalian dapat menambahkan kode berikut:
.centered-top-container.sticky { position: inherit !important; }
Letakan kode tersebut di atas atau sebelum kode ]]></b:skin

Selamat mencoba.

Beri Komentar atau, Ajukan Pertanyaan

2 Comments

  1. mantap terimakasih tips dan infonya mas...saya juga seneng otak atik eksperimen

    ReplyDelete
  2. oke oke boleh juga nih artikelnya mas hehe mantap

    ReplyDelete

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE