Notification texts go here Contact Us Buy Now!
Ana Sayfa
Arama Kutusu
Blogger

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

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

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.
#Arama Kutusu #Blogger

Yorum Gönder

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.