Blogger Arama Kutusu Eklemek İçin Beğeneceğiniz 6 Mükemmel Öneri

Blogger Arama Kutusu Eklemek İçin Beğeneceğiniz 6 Mükemmel Öneri

Blogger arama kutusu ekleme aslında çok basit bir kaç işlemle yapılmaktadır. Blogger eklentileri oluşturabilmek için bazen kodlardan da yardım almamız gerekiyor. Kodlar sayesinde özelleştirilmiş görünümler elde edebilirsiniz. Bu özelleştirilmiş görünümler arasında da arama kutusu oldukça önemli olabiliyor. Blogger tarafından sunulan arama kutusunu özelleştirmek için yapmanız gereken sadece sizlere vereceğimiz kodları söyleyeceğimiz şekilde uygulamanız olacak.



Blogger arama kutusu eklentisi oluşturabilmek için sizlere çeşitli seçenekler sunacağız. İstediğiniz seçeneği alıp sitenize uygulayabilirsiniz. Sitenizin SEO uyumlu olabilmesi adına temanızın görünümü de oldukça önemli bir durumdur. Temanız ne kadar profesyonel görünürse o kadar da ziyaret eden fazla olur. Bunun için Blogger arama kutusu eklentisini özelleştirmek daha cazip bir seçenek olarak görülmektedir. Sizlere arama kutusu örneklerinden tam tamına 6 seçenek sunacağız. İstediğinizi seçerek daha profesyonel bir arama kutusu oluşturabilir ve SEO uyumu adına da daha iyi tema içeriği sağlayabilirsiniz.

Blogger Arama Kutusu Nasıl Eklenir ? İşte Detaylar

İlk Olarak sizlere kırmızı renkli olan bir Blogger arama kutusu eklentisi sunalım. Aşağıda vereceğimiz kodları kopyalayıp, '' Yerleşim > Gadget Ekle > Html/Javascript Ekle '' seçeneklerine tıklayarak yapıştırmanız yeterli olacaktır. Daha sonra zaten istediğiniz alana Gadget'ı sürükleyebilirsiniz.

Blogger Arama Kutusu Eklemek İçin Beğeneceğiniz 6 Mükemmel Öneri

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKl4U3A66Jhk4xB9jtzWRXAxx0TbrLnt5I6AyO3YT46mWC7OeGaUD4ZCwgPF_y44lUfhR_sfM0QFt2Fw5zWk31wWfAUaE5zQ0C-ludC-gZRIkMTEGPIm2bex5r8yqQ0KysGo91LFvF3xpB/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Arama..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

2. Seçenek ise sade bir Blogger arama kutusu olarak değerlendirilen bir eklentidir.

Blogger Arama Kutusu Eklemek İçin Beğeneceğiniz 6 Mükemmel Öneri

<style>
input.gsc-input {
border:1px solid #d9d9d9;border-top:1px solid #c0c0c0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;height:28px;padding-left:4px;padding-right:4px;vertical-align:top;width:80%
}
input.gsc-input:hover {
border:1px solid #b9b9b9;border-top:1px solid #a0a0a0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-ms-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)
}
input.gsc-input:focus {
border:1px solid #4d90fe;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-ms-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none
}
input.gsc-search-button {
background-color:#4d90fe;background-image:url('http://www.blogger.com/img/widgets/icon_wikipedia_search.png');background-position:center;background-repeat:no-repeat;border:1px solid #3079ed;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;border-radius:2px;color:transparent;font-size:11px;font-weight:bold;height:28px;text-align:center;float:right;width:38px
}
input.gsc-search-button:hover {
background-color:#357ae8;border:1px solid #2f5bb7;color:transparent
}
</style>
<form action='/search' id='search' method='get'>
<input autocomplete="off" type="text" size="10" class=" gsc-input" name="q" title="ara" />
<input type="submit" value="Ara" class="gsc-search-button" title="ara" />
</form>
<br />
Blog'da arama yap »

3. Gri Blogger Arama Kutusu Ekleme

Blogger Arama Kutusu Eklemek İçin Beğeneceğiniz 6 Mükemmel Öneri

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTEyembgSD9rjXxVsJFDG3IjZy456OTBPwzVA5vAxvnd4kTVn4LIqAVNR7Agv0VLCoefu9DTPIy2GffODOtd9-V2iPH5P1Utex5ykBIZmpGRTcWvgOWHU280SndaIgDDWvKSaJnu2dNmO/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

İlginizi Çekebilir = Blogger Blog Sitenizin İçeriğini İçe Aktar, Dışa Aktar ve Yedekle

4. Renkli Blogger Arama Kutusu Ekleme

Blogger Arama Kutusu Eklemek İçin Beğeneceğiniz 6 Mükemmel Öneri

Aşağıda background-color yazan yerin karşısındaki yeşil ile yazan yerdeki renk kodlarını yukarıda gördüğünüz ve beğendiğiniz renk kodlarından bir tanesi ile değiştirebilirsiniz.

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search TechFrost' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

5. Siyah Blogger Arama Kutusu Ekleme

Blogger Arama Kutusu Eklemek İçin Beğeneceğiniz 6 Mükemmel Öneri

<style type="text/css">
    #hbz-searchbox {
        height: 35px;
        margin: 10px auto;
        position: relative;
        min-width: 250px;
        max-width: 300px;
    }
  
    .hbz-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #444;
        cursor: pointer;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
  
    .hbz-buttonwrap:hover {
        background: #1a1a1a;
    }
  
    .hbz-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }
  
    .hbz-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }
  
    .hbz-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }
  
    #hbz-input {
        height: 35px;
        width: 82%;
        padding: 0px;
        padding-left: 4%;
        border: none;
        outline: none;
        position: absolute;
        right: 14%;
        box-shadow: inset 0 2px 2px #080808;
        background-color: #444444;
        color: #fff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: all 0.5s;
    }
  
    #hbz-input:hover,
    #hbz-input:focus {
        box-shadow: inset 1px 1px 10px #000;
    }
</style>
<form action="/search" id="hbz-searchbox" method="get">
    <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="hbz-input" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
</form>

İlginizi Çekebilir = Web Sitesine En Fazla Kaç Tane Google Adsense Reklamı Konabilir ?

6. Siyah ve Gri Blogger Arama Kutusu Ekleme

Blogger Arama Kutusu Eklemek İçin Beğeneceğiniz 6 Mükemmel Öneri

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqVB0MOl67m4p_JM5PiFK17WYvPCXVf1dBUtAqI9CpRcCwRC4choMiaImqNKANxL0Me3b5xRi04-nxBHGXG6On9sTK5StsuBWa7-nR_oUgDLXjO2is6Sp32xsmg6W_lW3unDvZCRse695w/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Evet arkadaşlar kodlar farklı kaynaklardan faydalanılarak alınmıştır. Sıkıntısız bir şekilde sitelerinizde kullanabilirsiniz. Aklınıza takılan soruları yorum kısmından sormaktan çekinmeyin. Elimden geldiği kadar yardımcı olmaya çalışırım. Aslında bu kodların hepsi blogger temanızın html alanında mevcuttur fakat farklı tercihler isteyenler için yani kodlama hakkın bilgisi olmayanlar için iyi seçenekler olduğunu düşünüyorum. Umarım işinize yaracak Blogger arama kutusu bulmanıza katkı sağlayabilmişizdir.