Blogger Siteniz için 12 Şık Site İçi Arama Kutusu Eklentisi

Bugün blogcu / blogspot siteniz için 12 şık güzel arama kutusu aldım. Umarım seversin. CSS3 ve HTML kullanılarak oluşturulan tüm arama kutusu. Kendi olarak kolayca özelleştirebilirsiniz.

Site içi arama kutusu blogger'a nasıl eklenir onu anlatmaya çalışacağız ;

Öncelikle Blogger sayfamızı açıyoruz. Ve daha sonra Yerleşim alanına tıklıyoruz.

Yerleşim alanına tıkladıktan sonra sayfanızın sağ, sol veya istediğiniz bölümünde bulunan Gadget Ekle alnına ve oradan çıkan seçeneklerden HTML/Javascript bölümüne tıklıyoruz. Ve son olarak aşağıda vermiş olduğumuz veya beğendiğiniz seçeneklerden birini seçerek ekliyoruz.

Blogger Klasik Arama Kutusu:

<style>
#nbc-searchsimplebox1
{
padding:10px;
}
#nbc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchsimple1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchsimplebox1">
            <input name='q' id='nbc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchsimplesubmit1' type='submit' value='Search'/>
         </form>
      </div>

Şimdi sıra da diğer Arama kutusu seçeneğinin kodları ;

Blogger Geniş Arama kutusu:

<style>
#nbc-searchexpandbox1
{
padding:10px;
}
#nbc-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#nbc-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='nbc-searchexpand1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchexpandbox1">
            <input name='q' id='nbc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
      </div>

Arama Kutularında diğer bir seçeneğimiz daha var ;

Blogger Yeşil Arama kutusu:

<style>
#nbc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#nbc-searchgreenbox1
{
padding:10px;
}
#nbc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchgreen1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchgreenbox1">
            <input name='q' id='nbc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>

Blogger Kolay mavi Arama kutusu:

    <style><font></font>
    #nbc-searchblue1<font></font>
    {<font></font>
    background: rgb(37,141,200); /* Old browsers */<font></font>
    background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */<font></font>
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */<font></font>
    background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */<font></font>
    background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */<font></font>
     background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */<font></font>
    background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */<font></font>
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */<font></font>
     border-radius:10px;<font></font>
     width:290px;<font></font>
     }<font></font>
    #nbc-searchbluebox1<font></font>
     {<font></font>
     padding:10px;<font></font>
     }<font></font>
     #nbc-searchbluesubmit1<font></font>
    {<font></font>
     border:1px solid orange;<font></font>
     background: orange;<font></font>
     padding:5px;<font></font>
    color:#ffffff;<font></font>
      font:14px verdana;<font></font>
     }<font></font>
     #nbc-searchblueinput1<font></font>
      {<font></font>
     -moz-border-radius: 10px;<font></font>
     -khtml-border-radius: 10px;<font></font>
      -webkit-border-radius: 10px;<font></font>
       border:1px solid #ffffff;<font></font>
      background:#ffffff;<font></font>
      padding:5px;<font></font>
      color:#888888;<font></font>
      font:14px verdana;<font></font>
      }<font></font>
      </style><font></font>
      <div id='nbc-searchblue1'><font></font>
      <form action='/search/max-results=8'  method='get' id="nbc-searchbluebox1"><font></font>
     <input name='q' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/><font></font>
    <input id='nbc-searchbluesubmit1' type='submit' value='Search'/><font>

Blogger Beyaz renk Arama kutusu:

<style><font></font>
#MBBOldSearch {<font></font>
display: block;<font></font>
clear: both;<font></font>
margin: 10px 0;<font></font>
}<font></font>
#MBBOldSearch #MBBSinput {<font></font>
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWQrGFbUzPhiTjg_BE1GkMNxOrs6BY3YYTqK63Jdxv4qkverOtWRSVX6a4dUci9lOEml4LAgHZnAX1mWSXsO3cQlodOn2372VHov388sWtsLl-89kK7-MZTeZrefk5t6oOhyBvqBy7vXs/s1600/noxdo_blogspot_com_Search-icon.png) no-repeat scroll 8px center transparent !important;<font></font>
padding: 7px 15px 7px 35px !important;<font></font>
color: #444;<font></font>
font-weight: bold;<font></font>
text-decoration: none;<font></font>
border: 1px solid #D3D3D3 !important;<font></font>
-webkit-border-radius: 4px;<font></font>
-moz-border-radius: 4px;<font></font>
border-radius: 4px;<font></font>
-webkit-box-shadow: 1px 1px 2px #CCC inset;<font></font>
-moz-box-shadow: 1px 1px 2px #CCC inset;<font></font>
box-shadow: 1px 1px 2px #CCC inset;<font></font>
width: 52%;<font></font>
}<font></font>
#MBBOldSearch #MBBSsubmit {<font></font>
color: #444;<font></font>
font-weight: bold;<font></font>
text-decoration: none;<font></font>
padding: 6px 15px;<font></font>
border: 1px solid #D3D3D3;<font></font>
cursor: pointer;<font></font>
-webkit-border-radius: 4px;<font></font>
-moz-border-radius: 4px;<font></font>
border-radius: 4px;<font></font>
background: #fbfbfb;<font></font>
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<font></font>
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
arka plan: -webkit-doğrusal-gradyan (üst, #fbfbfb% 0, # f4f4f4% 100);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
arka plan: -o-doğrusal-gradyan (üst, #fbfbfb% 0, # f4f4f4% 100);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
arka plan: -ms-doğrusal-gradyan (üst, #fbfbfb% 0, # f4f4f4% 100);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# FBFBFB', endColorstr = '# F4F4F4', GradientType = 0);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
arka plan: doğrusal gradyan (üst, #fbfbfb% 0, # f4f4f4% 100);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
</ Style></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
 <div id = "MBBOldSearch"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    <form action = "/ search / max-results = 8"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        <input name = "q" id = "MBBSinput" type = "metin" /></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        <input value = "Ara" id = "MBBSsubmit" type = "gönder" /></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
    </ Form></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
</div></font></font>

Blogger Siyah ve beyaz renk Arama kutusu:

<style type="text/css"><font></font>
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGa1oONJTwOt98V6NZ80Abn6WXx66noDzgMbzouNkN8oxrcNOj-2kVt9OsyUuhNfqJ1wm1q1Bj-_kT8VNvC7Luv4IAg82TnnvGeuHGysWtzUcLw48ivljqoyHxy0hda8LHfPx04xyCGJI/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}<font></font>
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}<font></font>
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}<font></font>
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}<font></font>
</style><font></font>
<div id="nbc-searchbox"><font></font>
<form id="nbc-searchform" action="/search/max-results=8" method="get"><font></font>
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><font></font>
</form><font></font>
</div>

Blogger Kırmızı Arama kutusu:

<style type="text/css"><font></font>
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJWdroL2yrdqGBT4oCLZen0HQpWdCio7P2jWFRjHiYYDeW6aeq43UO3qvmDnT8aX7eQZ_kfWAutaMOT7pPH2aAIvMfc9XefwGlng-kNKO3pUDEE0c_ayQpbnQ-FMHFNbeu_rkkc6CRxo/s1600/noxdo_blogspot_com_Search-icon6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}<font></font>
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}<font></font>
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}<font></font>
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}<font></font>
</style><font></font>
<div id="nbc-searchbox"><font></font>
<form id="nbc-searchform" action="/search/max-results=8" method="get"><font></font>
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><font></font>
</form><font></font>
</div>

Umarım makale yazımızı beğenmişsinizdir. Sizin de düşünceleriniz var ise bu konu hakkında bizimle paylaşmayı unutmayın.

BP

Blogger Siteniz için 12 Şık Site İçi Arama Kutusu Eklentisi

Yorum Gönder

Blogger için Sosyal Paylaşım Düğmeleri Eklentisi

Blogger Translate (Çeviri) Düğme Eklentisi

Blogger Yazısı İçinde Tablo Ekleme

Blogger'da BüyükHarf ve Küçük Harf Değişikliği Nasıl Yapılır?

Blogger için Duyarlı Yüzen Sosyal Paylaşım Widget Eklentisi

Fineshop Design