Membuat navbar lengkap dengan header dan menu pencarian

Membuat Navbar blog berarti harus mempertimbangkan merubah header halaman blog juga. Navbar yang baik dapat membantu navigasi pengunjung pada saat mengunjungi blog, sehingga menjadikan template blog menjadi lebih SEO dan lebih User Friendly. Percaya atau tidak desain navbar adalah hal pertama yang paling mempengaruhi tampilan blog secara keseluruhan!

ilustration by: pexel

Pada kesempatan ini  saya akan memberikan tutorial membuat navbar blog dengan fitur:

1. Responsive. Cocok untuk segala ukuran layar, dari hape, tablet hingga laptop dan desktop.
2. Mobile friendly. Untuk tampilan mobile (hape) pada khsususnya akan berubah menjadi menu dropdown dengan tombol hamburger menu.
3. Berfungsi sebagai header dengan struktur heading h1, agar template menjadi terstruktur dengan baik. Judul blog akan muncul secara otomatis pada bagian paling kiri navbar. Dan judul itu sudah di formasikan sebagai heading h1.
4. Menu pencarian kaca pembesar full screen.
5. Yang paling penting Navbar ini adalah FIXED. Artinya ia akan tetap berada di atas halaman baik pada saat konten di scrol ke atas maupun pada saat di scroll ke bawah.

Tampilan navbar covid19 - mobile

Navbar ini saya buat sendiri dan telah saya terapkan ke template template buatan saya dan dapat di terapkan dengan sempurna ke template template terbaru blogger, terutama template template yang telah memiliki desain layout generasi ke-2.

navbar covid19 tampilan desktop

Saya tidak menyertakan demo karena template blog saya yang sekarang sedang mempergunakan navbar yang saya maksudkan. Jadi kita langsung kepada pembahasannya saja. Tetapi selalu jangan lupa backup template terlebih dahulu ya...

1. Membuat HTML:

<div class='topnav' id='myTopnav'>
<h1><b><a class='active' href='/'><font color='white'><data:blog.title/></font></a></b></h1>
<a href='https://www.editblogtema.net/search/label/kebijkan'>Kebijakan</a>
<a href='https://www.editblogtema.net/search/label/download'>Download</a>
<div class='dropdown'>
<button class='dropbtn'>Moreˇ
</button>
<div class='dropdown-content'>
<a href='https://www.editblogtema.net/search/label/paradox'>Paradox</a>
<a href='https://www.editblogtema.net/search/label/panduan'>Panduan memodifikasi template</a>
<a href='https://www.editblogtema.net/search/label/merombak'>Trik dasar merombak template Notable</a>
<a href='https://www.editblogtema.net/search/label/panduan%20mobile'>Trik mengedit template via mobile</a>
<a href='https://www.editblogtema.net/search/label/programmer'>Programmer</a>
<a href='https://www.editblogtema.net/search/label/A.I.'>A.I</a>
</div>
</div>

<a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'><b>&#9776;</b></a>
</div>
<div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</span>
<div class='overlay-content'>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/>
<button type='submit'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='currentColor'/>
</svg></button> 

</form>
</div>
</div>
<button class='openBtn' onclick='openSearch()'><svg style='width:28px;height:28px' viewBox='0 0 24 24'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='currentColor'/>
</svg></button>

Saya ingin menjelaskan kepada kalian, kode HTML yang saya merahkan diatas:
<h1><b><a class='active' href='data:blog.homepageUrl'><font color='white'><data:blog.title/></font></a></b></h1>
Adalah Judul blog yang akan tampil otomatis pada saat kalian menerapkan template nanti, perhatikan kodenya:

<a class='active' href='/'>

dan:

<data:blog.title/>

Letakan semua kode diatas di sesudah atau di bawah tag </head>
Catatan: Kalian dapat mengganti setiap link yang disorot warna kuning dengan link kalian sendiri berdasarkan label blog. Dan mengganti setiap tulisan warna biru dengan judul menu atau submenu yang cocok untuk halaman web/ blog kalian sendiri.

2. Membuat pengaturan CSS

Setelah meletakan kode HTML yang telah kita buat diatas, kita juga harus membentuknya dengan aba aba CSS berikut di bawah, letakan kode CSS berikut tepat di atas kode </head>:

<style>
body {margin:0;font-family:IM Fell English}
.topnav {
position: fixed;
z-index: 99;
width: 100%;
overflow: hidden;
background-color:#fff;
border-bottom: solid; border-color: #F0F8FF;
}
.topnav a {
float: left;
display: block;
color: red; display: block;
color: black;
text-align: center;
padding: 16px 18px;
text-decoration: none;
font-size: 19px;
}
.active {
background-color:indigo;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
outline: 10px;
border:none;
color: grey;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: relative;
background-color: transparent;
border: solid;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
border: solid;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: gold;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 800px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 800px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: fixed;
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;
}
}
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: transparent;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 99;
top: 3px;
left:75%;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 150;
top: 0;
left: 20;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 45%px;
right: 20%;
font-size: 60px;
cursor: pointer;
color: white;
z-index: 151;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: #c0c0c0;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: left;
width: 19%;
padding: 11px;
background: #c0c0c0;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}
svg {width:45px; height:45px}
svg path {fill:#4B0082}
.avatar {
vertical-align: middle;
width: 40px;
height: 40px;
border-radius: 50%;
}</style>

3. Menambahkan kode Javascript.

Cari kode </body> dan letakan javacript berikut tepat di bawahnya:

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>

Save Template. Jika terdapat kesulitan jangan sungkan bertanya melalui komentar di bawah postingan tutorial ini....