Özel Arama Kutusu Eklentisi

Blogger Özel Arama Kutusu Kodu

Bloggerde arama kutusunu özelleştirebilir ve istediğiniz yerde birden fazla kullanabilirsiniz.

Açık fon arka planlar için arama kutusu kodu:

<h2 class='title'>Sitenin derinliklerine Bak ! <div>
  Aradığını bulacaksın...</div></h2>
<div class='widget-content'>
<style>
#searchform{width:300px}
.txtSearch{width:160px; margin:-2px 0 9px 9px; background-position:0 -29px}
.txtSubscribe, .txtSearch{width:80%; height:23px; float:left; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMZnAIh6Z9myXbg3pA6OLcFMTbkhoYXpRtJyXbAODY2KbZjacjkRTY9ksEiSntCoM6bzTI-zZ-qCFFR2NeAHC1a0H0K0p46AZ0y0ucBQEl5iCcYqOmdTDREg0HPB-0FLkz1jC3RZXLdw/s1600/ara2.png') no-repeat; margin-top:5px; padding-left:40px}
.input-text{font-size:11px; border:1px solid #000; border-radius:3px; box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.07) inset;}</style>
<form action='https://webkenti.net/search/' id='searchform' method='get'>
<input type="text" class="txtSearch input-text" name="q"  placeholder="Arama..." x-webkit-speech="x-webkit-speech" onwebkitspeechchange="this.form.submit();" />
</form>
</div>
<div class='clear'></div><!--Author: webkenti.net-->

Koyu fon arka planlar için arama kutusu kodu:

<h2 class='title'>Sitenin derinliklerine Bak !</h2>
<div class='widget-content'>
<style>
#searchform{width:300px}
.txtSearch{width:160px; margin:-2px 0 9px 9px; background-position:0 -29px}
.txtSubscribe, .txtSearch{width:80%; height:26px; float:left; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0X22sx-opoFf0KfSCKYyMgqfPyuclH-Do9o11yZgtdT-a3NlukD3e-iR4yo8bSkGvfAhWdDhVCSS4gjIm-vWa7bjZslcaCgxYxmZ41RlyeDI_1TRi17EA7kaKTzMpmhELMm8taVVwmP4/s1600/ara.png') no-repeat; margin-top:5px; padding-left:40px}
.input-text{font-size:11px; border:1px solid #dadada; border-radius:3px; box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.07) inset;}</style>
<form action='https://webkenti.net/search/' id='searchform' method='get'>
<input type="text" class="txtSearch input-text" name="q"  placeholder="Arama..." x-webkit-speech="x-webkit-speech" onwebkitspeechchange="this.form.submit();" />
</form>
</div>
<div class='clear'></div><!--Author: webkenti.net-->

https://webkenti.net : Kendi site yada blog adresinizi yazınız.

Faydası olması temennisi ile.


HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.