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:

Bu soru bir çok kişiden geldi. Yaptığım uygulamayı bazı kişiler hemen sitelerine uyguladılar. Neden izin almadan uyguladınız diye sorduğumda da "bunlar açık kod, her sitede var. İstediğim gibi uygularım."  diye bir de utanmadan tepki gösterdi bu kişiler. A benim sazan kardeşlerim, kod benim kodum, nerede var hadi göster deyince de apışıp kaldılar. Bu sazanlar kendilerini çok iyi biliyorlar. Bazı arkadaşlar bu kişilerden ilgili uygulamayı istemişler ama kodun kendilerine ait olduğunu, bu nedenle de kodları veremeyeceklerini bildirmişler. Yani bu kadar da yüzsüz bu kişiler. Aslında daha ağır kelimeleri hak ediyorlar ama yeri burası değil.

Bu gereksiz açıklamadan sonra gelelim sorumunuzun cevabına.

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>