Site İçi Arama Formu Oluşturmak

Soru:

Site içi arama motoru oluşturdum. Bu sayfayı  sizin sitenizde olduğu gibi kısa yoldan form şeklinde nasıl oluşturabilirim?

Cevap:

1 - Öncelikle iki adet resme ihtiyacımız var.

Arama botunu için bir resim, ki bunun yerine metin halinde link de koyabilirsiniz ama resim koymak göze daha çok hitap ediyor.



Resim url'si : https://img.webme.com/pic/h/hackerfriend/arama.png


Diğer resmimiz de arama motoru formunda kullanacağımız arka plan resmi.



Resim url'si : http://hfserver1.googlepages.com/searchbox.png

Resim URL'lerine dikkat edin ve kod içinde kullanımlarına bakın.


• Bundan sonraki kodları TASARIM ÜZERİNDEKİ kısmına yapıştırınız.

2 - JAVA Kodu:

<script> /* www.hackerfriend.net */ var win = null; function NewWindow(mypage,myname,w,h,scroll){ LeftPosition = (screen.width) ? (screen.width-w)/2 : 0; TopPosition = (screen.height) ? (screen.height-h)/2 : 0; settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable' win = window.open(mypage,myname,settings) } </script> <script> function showForm() { oDiv = document.getElementById('aramamotoru'); oDiv.style.display='block'; return false; } function hideForm() { oDiv = document.getElementById('aramamotoru'); oDiv.style.display='none'; return false; } /* www.hackerfriend.net */ </script>

3 - CSS Kodu:

<style> a.aramamotoru{ position: absolute; top: 70px; right: 15px; text-transform:uppercase; z-index: 1; } #aramamotoru { display:none; position:absolute; margin-left: auto; margin-right: auto; top: 35%; left: 35%; width:315px; height: 135px; text-align: left; background-image: url(http://hfserver1.googlepages.com/searchbox.png); padding: 15px 0 0 17px; z-index: 1; } </style>

4 - Form kodu:

Buradaki sayfamızda site içi arama kodunun nasıl alındığını anlatmıştık. Arama Kodunu aşağıdaki gibi yerleştirin. Kırmızı ile belirttiğim yazılar orjinal üzerinde oynanmamış site içi arama kodudur. Sarı renk dolgulu kısımlara özellikle dikkat edin. JAVA ve CSS kodlarının hemen altına aşağıdaki kodu kendi sitenize göre değiştirerek yapıştırın.

<p><a onclick="return showForm();" href="search.htm" class="aramamotoru" title="Site içi arama"><img src="https://img.webme.com/pic/h/hackerfriend/arama.png" border="0" /></a></p>
<div id="aramamotoru">
<br/>
<form action="http://hackerfriend.tr.gg/search.htm" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="018383007845602883398:7hfuid0kl94" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="windows-1254" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Ara" />
    <input type="button" id="bCancel" name="bCancel" value="İptal" onclick="hideForm();"/>
  </div>
</form>
</div>