Bir web sitesinin kullanıcı deneyimini (UX) artıran en önemli unsurlardan biri, ziyaretçilerin istedikleri içeriğe saniyeler içinde ulaşmasını sağlayan etkili bir arama kutusudur. Özellikle büyüyen ve içerik sayısı artan sitelerde, işlevsel bir arama barı ziyaretçilerin sitede kalma süresini doğrudan artırır.
Bu rehberde, web sitenize hem şık görünümlü hem de dinamik olarak çalışan modern bir arama kutusunu adım adım nasıl ekleyeceğinizi öğreneceksiniz.
Adım Adım Arama Kutusu Yapımı
Bir arama kutusu temel olarak üç yapı taşından oluşur: Arayüzü oluşturan HTML, tasarımı sitenize uyumlu hale getiren CSS ve arama işlevini (form gönderimini veya filtrelemeyi) yöneten JavaScript.
1. Adım: HTML Yapısını Oluşturma
İlk olarak, arama giriş alanını (input) ve arama butonunu içeren temel HTML kodunu sitenizin görünmesini istediğiniz bölümüne (genellikle sidebar veya header alanı) ekleyin.
<div class="search-container">
<form action="/search" method="get" class="search-form">
<input type="text" name="q" class="search-input" placeholder="Sitede ara..." required="required" autocomplete="off">
<button type="submit" class="search-button">Ara</button>
</form>
</div>
2. Adım: CSS ile Şık ve Minimalist Tasarım Kurma
Arama kutusunun sitenizin modern estetiğine uyum sağlaması, köşelerinin hafif yuvarlatılmış olması ve odaklanıldığında (focus) pürüzsüz bir geçiş efekti sunması gerekir. Aşağıdaki CSS kodlarını sitenizin stil dosyasına (CSS) ekleyin:
.search-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-form {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid #ccc;
border-radius: 30px;
padding: 6px 15px;
width: 100%;
max-width: 400px;
transition: all 0.3s ease;
}
.search-form:focus-within {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}
.search-input {
flex: 1;
border: none;
background: none;
outline: none;
padding: 8px;
font-size: 16px;
color: #333;
}
.search-button {
background: #007bff;
color: #fff;
border: none;
padding: 8px 18px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: background 0.2s ease;
}
.search-button:hover {
background: #0056b3;
}
3. Adım: JavaScript ile Gelişmiş Özellikler Tanımlama (İsteğe Bağlı)
Kullanıcı "Ara" butonuna basmadan önce arama alanını boş bıraktığında formun gönderilmesini engellemek veya ilerleyen süreçte canlı arama (live search) özellikleri eklemek için bu temel JavaScript yapısını kullanabilirsiniz:
document.querySelector('.search-form').addEventListener('submit', function(e) {
var query = document.querySelector('.search-input').value.trim();
if (query === '') {
e.preventDefault();
alert('Lütfen bir arama terimi girin.');
}
});
Arama kutunuz artık hazır! Bu entegrasyon sayesinde sitenizin navigasyon yapısını güçlendirerek kullanıcıların eski veya yeni tüm içeriklerinize erişimini kolaylaştırabilirsiniz.
web sitesine arama kutusu ekleme, blog arama barı yapımı, html arama kutusu kodları
İlgili Diğer Başlıklar
Blog Siteleri İçin Kullanıcı Deneyimini Artıran En Önemli 5 Bileşen
HTML ve CSS ile Minimalist Arama Formu Tasarımları
Web Sitelerinde Site İçi Arama Motoru Optimizasyonu Nasıl Yapılır?
JavaScript ile Canlı (Anlık) Arama Fonksiyonu Yapımı
Blogger ve WordPress Sitelerde Arama Kutusu Özelleştirme Teknikleri
İlgili Anahtar Kelimeler
arama kutusu kodu, web site içi arama, html search bar, blog geliştirme, css arama formu, site içi navigasyon, web tasarım dersleri, arama çubuğu yapma, javascript arama filtreleme, kod arşivi,