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 |
- Contempo
- Emporio
- Soho
- Notable
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>
<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>Letakan kode berikut tepat di atas kode </nav>:
</div>
</header>
<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()">☰</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:
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.
mantap terimakasih tips dan infonya mas...saya juga seneng otak atik eksperimen
BalasHapusoke oke boleh juga nih artikelnya mas hehe mantap
BalasHapus