Table of Contents

Arama Butonu Eklemek

Arama butonu, web sitelerinde kullanıcıların istedikleri içeriği bulmalarına yardımcı olan önemli bir öğedir. Bir arama butonu eklemek, kullanıcı deneyimini geliştirmek ve kullanıcıların sitenizdeki içerikleri daha kolay bulmalarını sağlamak için önemlidir. Bu makalede, bir arama butonunu web sitenize nasıl ekleyebileceğinizi adım adım anlatacağım.

1. HTML Kodu Oluşturma

İlk adım olarak, arama butonunu eklemek istediğiniz sayfada HTML kodu oluşturmanız gerekmektedir. HTML kodunu oluşturmak için bir metin düzenleyici veya HTML düzenleyici kullanabilirsiniz. Aşağıda temel bir arama butonu için gerekli olan HTML kodunu bulabilirsiniz:

<form action="/arama" method="get">
   <input type="text" name="q" placeholder="Arama yap">
   <button type="submit">Ara</button>
</form>

Yukarıdaki kod, bir HTML formu içinde bir metin giriş alanı (<input>) ve bir arama butonu (<button>) oluşturur. Formun action özelliği, arama sonuçlarının yönlendirileceği URL’yi belirtir. method özelliği, formun verilerini nasıl göndereceğini belirler. Genellikle get yöntemi kullanılır çünkü arama sorgusu URL’nin bir parçası olarak görüntülenir.

2. CSS Stilini Uygulama

HTML kodunu oluşturduktan sonra, arama butonunu istediğiniz şekilde stilize etmek için CSS kullanabilirsiniz. CSS, renkler, boyutlar, yazı tipleri ve düzen gibi görünüm özelliklerini kontrol etmenizi sağlar. Örneğin, aşağıdaki CSS kodu, arama butonunu mavi bir arkaplan ve beyaz bir metin ile stilize eder:

button {
   background-color: blue;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
}

input {
   padding: 10px;
   border: 1px solid gray;
   border-radius: 5px;
   font-size: 14px;
}

Yukarıdaki CSS kodunu kullanarak, arama butonunu ve metin giriş alanını istediğiniz şekilde özelleştirebilirsiniz. Örneğin, farklı bir arkaplan rengi veya farklı bir yazı tipi kullanabilirsiniz.

İlk adımda HTML kodunu oluşturduk ve ikinci adımda CSS stilini uyguladık. Şimdi, arama butonunu web sitenizin istediğiniz bölümüne yerleştirmek için bu kodları kullanabilirsiniz. İkinci parçada, bu kodları kullanarak arama butonunu web sitenize nasıl entegre edeceğinizi açıklayacağım.

Arama Butonunu Web Sitene Entegre Etmek

İlk parçada, arama butonunu oluşturmak için gerekli olan HTML kodunu ve CSS stilini öğrendik. Şimdi, bu kodları kullanarak arama butonunu web sitenize nasıl entegre edeceğinizi adım adım açıklayacağım.

1. HTML Kodunu Sayfaya Eklemek

İlk adımda, oluşturduğumuz HTML kodunu web sayfasına eklememiz gerekiyor. Bunun için aşağıdaki adımları takip edebilirsiniz:

Web sayfanızın düzenlemek istediğiniz bölümünde, HTML kodunu eklemek için bir metin düzenleyici veya HTML düzenleyici açın.
HTML kodunu kopyalayın ve metin düzenleyicinizdeki uygun yere yapıştırın.
Kodun doğru bir şekilde yerleştirildiğinden emin olmak için sayfayı önizleyin veya web tarayıcınızda açın.

Bu adımları takip ederek, oluşturduğunuz arama butonunu web sayfanıza ekleyebilirsiniz. Şimdi sıra CSS stilini uygulamaya geldi.

2. CSS Stilini Uygulamak

HTML kodunu ekledikten sonra, arama butonunu istediğiniz şekilde görüntülemek için CSS stilini uygulamanız gerekiyor. CSS stilini uygulamak için aşağıdaki adımları izleyebilirsiniz:

Web sayfanızın <head> bölümünde, <style> etiketini kullanarak CSS kodlarını ekleyin. Örneğin:

  <head>
    <style>
      button {
         background-color: blue;
         color: white;
         padding: 10px 20px;
         border: none;
         border-radius: 5px;
         cursor: pointer;
      }
      
      input {
         padding: 10px;
         border: 1px solid gray;
         border-radius: 5px;
         font-size: 14px;
      }
    </style>
  </head>

Yukarıdaki CSS kodunu kopyalayın ve <style> etiketi içine yapıştırın.
Kodun doğru bir şekilde yerleştirildiğinden emin olmak için sayfayı önizleyin veya web tarayıcınızda açın.

Bu adımları izleyerek, arama butonunu oluşturduğunuz web sayfasına entegre edebilirsiniz. Artık kullanıcılar web sitenizde arama yapmak için arama butonunu kullanabilirler.

Hatırlatmak gerekirse, arama butonunu eklerken HTML ve CSS kodlarını daha fazla özelleştirebilirsiniz. Örneğin, butonun boyutunu veya renklerini değiştirebilirsiniz. Bu şekilde, web sitenize uygun bir arama butonu oluşturabilir ve kullanıcı deneyimini iyileştirebilirsiniz.

arama butonu eklemek