Cara Buat Kotak Search Cantik di Blogger
Tutorial ringkas untuk menambah kotak carian yang kemas, moden dan mesra pengguna di blog Blogger.
Kotak Search atau kotak carian merupakan salah satu fungsi penting dalam sesebuah blog. Dengan adanya kotak carian, pembaca boleh mencari artikel atau kandungan tertentu dengan lebih mudah tanpa perlu membuka satu persatu halaman blog.
Dalam tutorial kali ini, kita akan membuat sebuah kotak search moden berbentuk bujur dengan butang carian berwarna hitam. Rekaan ini sesuai digunakan pada kebanyakan template Blogger kerana tampil ringkas, bersih dan responsif.
🔍 Contoh Kotak Search
📌 Cara Memasang Kotak Search
Langkah 1: Buka dashboard Blogger anda.
Langkah 2: Pilih menu Tata Letak (Layout).
Langkah 3: Klik Tambah Gadget pada bahagian yang anda mahu.
Langkah 4: Pilih gadget HTML/JavaScript.
Langkah 5: Masukkan kod berikut ke dalam ruangan kandungan.
💻 Kod HTML Kotak Search
<style>
.search-blog {
max-width: 500px;
margin: 15px auto;
display: flex;
background: #fff;
border: 1px solid #ddd;
border-radius: 50px;
padding: 5px;
box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
.search-blog input {
flex: 1;
border: none;
outline: none;
padding: 12px 18px;
font-size: 15px;
background: transparent;
}
.search-blog button {
border: none;
background: #000;
color: #fff;
padding: 0 22px;
border-radius: 50px;
font-weight: bold;
cursor: pointer;
}
.search-blog button:hover {
opacity: .8;
}
</style>
<form class="search-blog" action="/search" method="get">
<input
type="search"
name="q"
placeholder="Cari dalam blog..."
aria-label="Cari dalam blog"
required="required" />
<button type="submit">🔍 Cari</button>
</form>
⚠️ Jika Keluar Error SAXParseException
Jika anda memasukkan kod ke dalam Theme → Edit HTML Blogger dan mendapat error seperti di bawah:
org.xml.sax.SAXParseExceptionAttribute name "required" associated with an element type "input" must be followed by the '=' character.
Ini biasanya berlaku kerana template Blogger menggunakan format XML yang lebih ketat berbanding HTML biasa.
Dalam HTML biasa, kita boleh menulis:
required
Tetapi dalam XML Blogger, lebih selamat menggunakan:
required="required"
Begitu juga, tag <input> perlu ditutup dengan format XML:
/>
💡 Tips Penting
- Gunakan required="required" jika kod dimasukkan dalam template XML Blogger.
- Pastikan tag kosong seperti
<input>ditutup dengan/>. - Jika kod dimasukkan melalui gadget HTML/JavaScript, pastikan kod tidak bercanggah dengan CSS template.
- Uji kotak search selepas pemasangan dengan mencari tajuk artikel yang memang terdapat dalam blog.
- Gunakan placeholder yang ringkas seperti "Cari dalam blog..." supaya pembaca mudah memahami fungsi kotak tersebut.
Kesimpulan
Dengan menggunakan kod ringkas ini, anda boleh menambah kotak search yang lebih cantik dan moden ke dalam blog Blogger. Fungsi ini bukan sahaja menjadikan blog kelihatan lebih kemas, malah memudahkan pembaca mencari kandungan yang mereka perlukan.
Semoga tutorial ini membantu anda memperkemaskan lagi reka bentuk blog dan memberikan pengalaman yang lebih baik kepada para pembaca.
Jadikan blog anda lebih kemas, moden dan mudah digunakan.