Setelan Header Pada Kodeksidipo — Kodeksidipo

Sebelumnya pada bagian Header hanya ada Judul Blog saja.

Kemudian, tag HTML bagian Header Judul Blog tersebut Saya rubah menjadi:

<b:includable id='main'>
<!-- No header image -->
<div class='fixed-header' id='header-inner'>
<div class='header-flex-container'>
<!-- Judul asli bawaan Anda -->
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:include name='description'/>
</div>
<!-- Tambahan: Kolom Pencarian Mengembang -->
<div class='search-wrapper'>
<!-- Form ditambahkan ID dan event onsubmit -->
<form action='/search' class='search-form' id='bloggerSearchForm' method='get' onsubmit='return validateSearch(event)'>
<div class='search-input-container'>
<input class='search-input-expand' id='bloggerSearchInput' name='q' placeholder='Cari...' type='text'/>
<input name='max-results' type='hidden' value='5'/>
<!-- Tempat memunculkan teks peringatan kustom -->
<span class='custom-error-msg' id='searchErrorMsg'>Masukkan kata kunci</span>
</div>
<button class='search-btn' type='submit'>
<svg viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>
</button>
</form>
</div>
</div>
</div>
</b:includable>

Lalu mencantumkan CSS-nya.

/* Mengunci Posisi Header Mengikuti Gulungan Layar */
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ffffff; /* Ubah warna latar jika diperlukan */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 9999;
box-sizing: border-box;
}
/* Mengatur Tata Letak Judul Dan Pencarian Sejajar */
.header-flex-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px; /* Batas lebar konten header */
margin: 0 auto;
}
.region-inner.main-inner {
margin-top: 70px;
}
.header-inner .Header .titlewrapper {
padding: 0!important;
}
/* Desain Dasar Kolom Pencarian */
.search-wrapper {
display: flex;
align-items: center;
}
.search-form {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 20px;
background: #f9f9f9;
padding: 2px;
transition: all 0.3s ease;
}
/* Efek Animasi Mengembang */
.search-input-expand {
border: none;
background: transparent;
outline: none;
padding: 6px 0px;
width: 0px; /* Tersembunyi saat awal */
font-size: 14px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
opacity: 0;
}
/* Mengembang saat diklik / fokus input */
.search-form:focus-within {
border-color: #333;
background: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.search-form:focus-within .search-input-expand {
width: 200px; /* Melebar hingga 200px saat aktif */
padding: 6px 12px;
opacity: 1;
}
/* Tombol Ikon Cari */
.search-btn {
background: transparent;
border: none;
padding: 6px 10px;
cursor: pointer;
display: flex;
align-items: center;
border-radius: 50%;
}
.search-btn svg {
width: 20px;
height: 20px;
fill: #555;
transition: fill 0.2s ease;
}
.search-form:focus-within .search-btn svg {
fill: #000;
}
/* Pembungkus input untuk memposisikan teks error */
.search-input-container {
position: relative;
display: flex;
align-items: center;
}
/* Desain teks peringatan kustom tanpa tanda seru */
.custom-error-msg {
display: none; /* Sembunyikan secara default */
position: absolute;
top: 80%; /* Muncul tepat di bawah kolom input */
left: 10px;
background-color: #333333; /* Warna latar gelap yang elegan */
color: #ffffff;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
z-index: 10000;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Animasi muncul halus saat form aktif */
.custom-error-msg.show-error {
display: block;
}

Dan ga lupa mencantumkan javascript pengaktif.

 <!-- bloggerSearchInput Start -->
<script>
function validateSearch(event) {
var input = document.getElementById(&#39;bloggerSearchInput&#39;);
var errorMsg = document.getElementById(&#39;searchErrorMsg&#39;);
// Jika kolom pencarian kosong atau hanya berisi spasi
if (input.value.trim() === &#39;&#39;) {
event.preventDefault(); // Batalkan pengiriman form ke halaman pencarian
errorMsg.classList.add(&#39;show-error&#39;); // Tampilkan teks peringatan kustom
// Otomatis sembunyikan kembali peringatan setelah 3 detik
setTimeout(function() {
errorMsg.classList.remove(&#39;show-error&#39;);
}, 3000);
return false;
}
return true;
}
// Sembunyikan peringatan secara instan jika pengguna mulai mengetik
document.getElementById(&#39;bloggerSearchInput&#39;).addEventListener(&#39;input&#39;, function() {
document.getElementById(&#39;searchErrorMsg&#39;).classList.remove(&#39;show-error&#39;);
});
</script>
<!-- bloggerSearchInput End -->