Sitene 3 Farklı Arama Kutusu

Görüntüleme

Kod Görüntüsü

Kod Acıklaması

Merhaba arkadaşlar şuanda sizlere 3 farklı arama motoru göstereceğim.Bu arama motorları gerçekten sitenize ahım şahım bir görüntü kazandıracak.Eğer sitenizde bir arama motoru yoksa kesinlikle bu arama motorlarından bir tanesini seçip sitenizin en başına koymalısınız,tavsiyemdir. Paylaştığım arama motorları görünüş bakımından ve renk bakımından sizlere çok fazla avantaj sağlayabilir.Bunu değerlendirmeye ne dersiniz ? O zaman ben kodları vereyim . Bu arada arama motorları %100 çalışıyor hiç bir sıkıntı yoktur.

Nereye Ekleyeceksin ?

Adım 1 : İlk olarak beğendiğimiz arama motorunun kodunu ctrl+c yöntemi ile kopyalıyoruz. 

Adım 2 : Ardından www.blogger.com deyip kendi blogunuzu seçiyorusunuz. 

Adım 3 : Yerleşim > Gadget Ekle > Html / JavaScript diyoruz ve 

Adım 4 : Kodlarımızı ctrl+v yardımı ile yapıştırıp kaydet diyoruz.

Kodları Al

Arama Motoru 1 ;

<style>#searchbox { background: #d8d8d8; border: 4px solid #e8e8e8; padding: 20px 10px; width: 250px; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } #searchbox input { outline: none; } #searchbox input[type="text"] { background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff; border-width: 1px; border-style: solid; border-color: #fff; font: bold 12px Arial,Helvetica,Sans-serif; color: #bebebe; width: 55%; padding: 8px 15px 8px 30px; } #button-submit { background: #6A6F75; border-width: 0px; padding: 9px 0px; width: 23%; cursor: pointer; font: bold 12px Arial, Helvetica; color: #fff; text-shadow: 0 1px 0 #555; } #button-submit:hover { background: #4f5356; } #button-submit:active { background: #5b5d60; outline: none; } #button-submit::-moz-focus-inner { border: 0; } </style> <form id="searchbox" method="get" action="/search"> <input name="q" type="text" size="15" placeholder="Ara Bakalım...." /><input id="button-submit" type="submit" value="Ara" /></form>
Arama Motoru 2 ;

<style>#searchbox { background: url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/s1600/searchbar.png) no-repeat; width: 208px; height: 29px; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } #searchbox input { outline: none; } #searchbox input[type="text"] { background: transparent; margin: 3px 0px 0px 20px; padding: 5px 0px 5px 0px; border-width: 0px; font-family: "Arial Narrow", Arial, sans-serif; font-size: 12px; color: #828282; width: 70%; display: inline-table; vertical-align: top; } #button-submit { background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat; border-width: 0px; cursor: pointer; margin-left: 10px; margin-top: 4px; width: 21px; height: 22px; } #button-submit:hover { background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat; } #button-submit:active { background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat; outline: none; } #button-submit::-moz-focus-inner { border: 0; } </style> <form id="searchbox" method="get" action="/search" autocomplete="off"> <input name="q" type="text" size="15" placeholder="Ara Bakalım ...." /> <input id="button-submit" type="submit" value="" /></form>
Arama Motoru 3 ;

<style>#searchbox { background: url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/s1600/search-box.png) no-repeat; height: 27px; width: 202px; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } #searchbox input { outline: none; } #searchbox input[type="text"] { background: transparent; margin: 0px 0px 0px 12px; padding: 5px 0px 5px 0px; border-width: 0px; font-family: "Arial Narrow", Arial, sans-serif; font-size: 12px; font-style: italic; width: 77%; color: #828282; display: inline-table; vertical-align: top; } #button-submit { background: url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat; border-width: 0px; cursor: pointer; width: 30px; height: 25px; } #button-submit:hover { background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/s1600/search-button-hover.png) no-repeat; } #button-submit::-moz-focus-inner { border: 0; } </style> <form id="searchbox" method="get" action="/search" autocomplete="off"> <input name="q" type="text" size="15" placeholder="Ara Bakalım ...." /><input id="button-submit" type="submit" value="" /></form>

Arama Sonuçları: