Cara membuat navbar responsif dengan menu gulir plus kotak pencarian

Halo teman teman khususnya peminat koding dan blogging! Selamat tahun baru 2020. Semoga cita cita kalian tercapai di tahun yang penuh dengan keberuntungan...

Bertemu lagi dengan saya yang sedang berusaha memberikan panduan untuk membuat menu navigasi blogger. Dengan tujuan kalian dapat belajar ilmu baru, karena saya berfikirnya mungkin sebagian kalian menyangka ilmu koding itu susah. Iya memang kalau belum belajar saja kalian sudah menganggapnya susah.

Padahal masa depan sudah semakin dekat, dimana pengatahuan seperti inilah kelak yang paling banyak berperan dalam segala aktifitas kehidupan manusia.

 Waduh jadi mukadimah pula. Baiklah saya akan melanjutkan sebuah panduan membuat navbar super ringan, tidak memberatkan loading, dan plus ada menu pencariannya juga, lho, alasan mengapa sangat ringan adalah:

Tidak melibatkan font awsome untuk pemasangan ikonnya
Tidak melibatkan Javascript untuk tombol reaksinya.
Dan belajarnya tetap melalui w3school, karena saya memanfaatkan pelajaran berikut halaman editor HTML milik situs belajar koding ini. Kalian akan merasakan betapa besar manfaatnya belajar secara otodidak, mendapatkan nilai lebih dari ilmu pengatahuan yang kalian dapatkan sendiri.

Ikuti juga panduan saya:

 
CARA MEMBUAT NAVBAR DENGAN MENU DROPDOWN PLUS TOMBOL MENU PENCARIAN 

Cara pemasangannya hanya memerlukan dua langkah saja.:

1. CSS Login ke Blogger.

Pilih blog untuk diperbarui.
Di menu sebelah kiri, klik Tema.
Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
Cari kode </head> Dan letakan kode berikut tepat diatasnya:

<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: none;
float: left;
width: 80%;
border: 2px solid grey;radius: 2px;
background: transparent;
}
form.example button {
float: center;
width: 20%;
padding: 8px;
background: #C0C0C0;
color: white;
font-size: 17px;
border: none;
border-left: red;
border-radius: none;
cursor: pointer;
}
form.example button:hover {
background: grey;
}
form.example::after {
content: "";
clear: both;
display: table;
}
div.scrollmenu {
background-color: #2196F3;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
svg {width:24px; height:24px}
svg path {fill:#2196F3}
</style>

2. HTML Masih di dalam opsi editor HTML blogger letakan letakan kode HTML berikut di bawah kode </head>:

<div class="scrollmenu">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
<a href="#logo">Logo</a>
<a href="#friends">Friends</a>
<a href="#partners">Partners</a>
<a href="#people">People</a>
<a href="#work">Work</a>
</div>

<form class="example" action="/action_page.php">
<input type="text" placeholder="Cari Artikel.." name="cari"/>
<button type="submit"><svg>
<path fill="#000000" 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" />
</svg></button>
</form>

Save Template.

Lihat hasilnya:

See the Pen poNREpy by Sufyan Yaan (@sufyan-yaan) on CodePen.

Hanya melalui dua langkah itu saja kalian telah memiliki sebuah menu yang ringan dan membuat SEO blogger kalian meningkat! (urutan pertama SEO 2020 adalah kecepatan)

Dapat di terapkan ke template bawaan blogger versi lama dan juga yang terbaru.