Blogger Site İçi Arama Kutusu Eklentileri

Share:
Blogger-site-içi-arama-kutusu-kodları

Blogger için arama kutusu eklentisi, Site içi arama kutusu kodu, Blog'a arama kutusu ekleme
  Blogger altyapısı ile blog kullananlar için site içi arama kutusu eklentisi paylaşmak istiyorum. Bu yazı ile maksadım kaynak niteliğinde kapsamlı seçenekler sunması olacak. Çok çeşitli ve farklı yapılarda arama kutusu eklentileri ile bu yöndeki arayışlarınızın son bulacağını düşünüyorum. Aşağıda vereceğim tüm kodlar basit bir şekilde eklenir ve kullanıma hazır olur. Çoğu blog temasında zaten mevcut bir eklenti ama değiştirmek isteyenler veya olmayıpta eklemek isteyenler için bir kaç seçenek sunmak istiyorum. Blogunuzda arama kutusu bulundurarak ziyaretçilerinize kolaylık sağlarsınız. Bu şekilde bir kod ile arananlar hemen bulunacak ve sitede geçirilen süreye de olumlu katkı sağlayacaktır. Ziyaretçilerin hemen çıkma oranı azaldıkça SEO için iyi şeyler yapıyorsunuz demektir. Başarının kapısını açan altın anahtar SEO için arama kutusu eklentisi dolaylı yoldan yardımcı olacaktır. Blog sayfanızda geçirilen süreyi artırmak için buradaki yazımı da okuyabilirsiniz.

  Ekleyeceğiniz arama kutusu için en uygun yerler header (üst kısım) ile sidebar (yan kolon) alanının üst tarafları düşünülebilir. Ziyaretçinin görmesini sağlayacak yerlerde kullanılmalıdır. Ayrıca blog sayfamda paylaştığım kodlar kendime ait olmayıp sadece ziyaretçilerin aradıklarını tek bir yerde hemen bulmaları için hazırlıyorum.

Blogger Arama Kutusu Nasıl Eklenir?

 Blogger kumanda paneli> Yerleşim> Gadget Ekle ve Html/Javascript yolunu takip ederek kodları yapıştırıp kaydediyorsunuz. Bu şekilde işlemi tamamladıktan sonra eklentinizi kullanabilirsiniz.



<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaFTZYmXNSWnUoFe0oD0bjtw8uXUJa0SCUCoXeZdY2fZUWPpMq3a7ZVX-IzT_DNtUBlzJFZ6vH4F1PZt8ogHM9TOmUZ9CbjqQ9NRtBWOZu4v7Vxc3KrDMt5V3zpqIFl9iUaFruPA2A0BHo/) 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>


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0jRDA7yb77xtl8DD2KJbqkemjJ2eqoHq1iSqCM2SlBzHtQICn4ZYzixUxy-Hv8xWB_WHQj8-Tof2fgd7u6MAHVFNEGOhaqjs1FLeSfiiSWLr8Isl7tyjqkyaPzTvhiTovuCxS52JSK6G/) 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>





<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 »








<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>


<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>


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiGx2C0LSLn4jN2tx832yEQmKmDKtS0BQSIwplpo9yIwQVX-X9sg5meqZtg8nJtr1norwrnF3MHauhq2Gn8_I2jgsFFvG-JstvAXS5BGDHFZMd8A5Ig-RE1PRytAEhGYUfLqk7A4TQA0fk/) 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>
Bu yazı Doğuş Hakan Yılmaz - Seo Teknikleri ve Blog İpuçları tarafından yazılmıştır.

4 yorum:

  1. Blogumun tasarımını kendim yapmama rağmen arama kutusu eklemeyi unutmuşum :) Bloglar için arama kutusu çok kullanışlı oluyor.Hemen birini ekledim bloga :)
    Teşekkürler :)

    YanıtlaSil
  2. Meraba ben html de site içerisinde arama motoru yaptım. Arama yaparken küçük i harfiyle arama yapamıyorum. Rica etsem yardımcı olur musunuz.

    YanıtlaSil

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.

Seo Teknikleri ve Blog ipuçlarını alarak daha fazla ziyaretçi ve en yüksek verimi hedefleyin.