kodlar tıkır tıkır çalışıyor; teşekkür ediyorum. css kodlarında renk ayarlarını yapmam gerekiyor onunla uğraşacagım biraz :)



isminin json search oldugunu öğrenmem iyi oldu teşekkürler :)



Ek Olarak:

@CyberAdam ve @BRHMCR

css kodlarını yapabildiğim kadar düzenledim. Fakat 3 problemim var. kodu aşağıda vereceğim. yardımınızı bekliyorum. site adresi imzamda; problemi orada da görebilirsin.

1. Problem: Arama kutusuna yazılan yazıların rengi siyah; onları beyaz yapacak yeri bulamadım; sanırım yeni bir kod eklemek gerekiyor.

2.Problem: Arama Kutusu beyaz çerçeve içinde. ben bu çerçeveyi kaldırmak istiyorum...

3.Problem: Arama yaptıktan sonra çıkan sonuçlar kısmında; resimler tam görünmüyor. height değerini yükseltmek gerekiyor sanırım; fakat tam olarak nereyi yükselteceğimi bilmiyorum.
Çıkan sonuç başlıklarının altında kayıt ile ilgili 1 satırlık açıklama var; height değeri yeterli olmadıgı için o açıklama cümlesinin de yarısı görünmüyor.




(aşağıdaki kod cyberadam.net'ten aldıgım kodun bir kaç yeri editlenmiş hali..)
/* Codex Cyber Adam Arama Kutusu
---------------------------------------------*/
#search-form-feed {
width:250px;
position:relative;
margin:0 0 0px;
padding:0;
font:normal normal 11px/normal Arial,Sans-Serif;
color:orange;
}

#feed-q-input {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
display:block;
width:100%;
border:1px solid #fff;
background:none;
padding:5px 5px;
font:inherit;
font-size:13px;
margin:0;
}

#search-result-container {
width:400px;
height:300px;
overflow:auto;
position:absolute;
background-color:black;
top:100%;
left:0; /* ganti menjadi `right:0` untuk mendorong kontainer ke kanan */
z-index:9999;
border:1px solid #ccc;
padding:10px 10px 0;
margin:10px 0 0;
-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);
-moz-box-shadow:0 3px 5px rgba(0,0,0,.2);
box-shadow:0 3px 5px rgba(0,0,0,.2);
display:none;
}

#search-result-container mark {
font:inherit;
display:inline;
background-color:black;
color:white;
}

#search-result-container a {
text-decoration:none;
font-weight:bold;
font-size:110%;
display:block;
}

#search-result-container h4 {
margin:0 0 10px;
font:inherit;
font-weight:bold;
color:orange;
}

#search-result-container ol {
background:none;
border:none;
margin:0 0 10px;
padding:0;
}

#search-result-container li {
margin:0 0 15px;
list-style:none;
overflow:hidden;
word-wrap:break-word;
padding-left:65px;
}

#search-result-container li img {
display:block;
float:left;
margin:0 0 2px -55px;
border:1px solid white;
padding:2px;
}

#search-result-loader {
position:absolute;
top:100%;
left:5px;
z-index:9999;
margin-top:4px;
font-size:10px;
display:none;
}