Ö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('http://1.bp.blogspot.com/-KStPYBogg6s/VG0FMLfmX8I/AAAAAAAANFw/Sa61taxcrSU/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('http://3.bp.blogspot.com/-Hx2I2e01nAM/VG0FMGM7G0I/AAAAAAAANF0/3DG6LONeq4Y/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.