CARA MEMBUAT NAVBAR DENGAN MENU GULIR PLUS KOTAK PENCARIAN PADA TEMPLATE BLOGGER

navbar blogger dengan menu gulir
Halo para otodidaker! Halo teman teman khususnya peminat koding dan blogging! Selamat tahun baru 2020. Semoga cita cita kalian tercapai di tahun yang penuh dengan keberutungan...

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.

Sekali lagi kalian harus ingat, Trik ini saya utak atik dari halaman w3school, coba deh klik link berikut dan ingat, jika ingin melihat hasilnya jangan lupa klik 'RUN' di atas menu ya...Cobalah klik demo dibawah ini:

Menu bergulir dalam navbar blogger
Kalau kalian sudah klik 'RUN' tombol warna hijau akan tampil hasil pekerjaan saya seperti pada gambar berikut di bawah, kalian juga pasti akan bisa melakukan hal yang sama.

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.

Beri Komentar atau, Ajukan Pertanyaan

0 Comments