7 Bloga-siteye arama kutusu eklemek

Bloga-siteye arama kutusu eklemek

Merhaba arkadaşlar dünya üzerinde birçok webmasterin arama kutusu hakkında bilmedikleri seo açısından önemli bir yazı yazmaya karar verdim.

Arama kutusu nedir: Arama kutusu, biz buna search box'da deriz. Arama kutusunun işlevi ziyaretçilerin sitede bulamadıkları bilgileri site içi arama yaparak daha kolay bulmasıdır.

Arama Kutusu Ne işe Yarar: Arama kutusu siteye-bloga uyumlu olursa güzel bir görünüş sağlar ve seo açısından sitenize yararlı olacaktır.

Seo Açısından Arama Kutusu

Örneğin: Arama kutusunun üzerine bunları yazmanız yararlı olacaktır (aradığınızı burada bulabilirsiniz, aradığınızı bulamadınızmı, Aramak bulmanın yarısıdır, Burdan aradığınızı bulabilirsiniz) gibi şeyler yazarsanız ziyaretçilerin dikkatini çekersiniz ve bulamadıklarını orada aramaya başlarlar.

En önemli noktaya geldik ziyaretçiler arama kutusundan örneğin; bir film sitesinde bulamadıkları bir filmi aradılar ve bulup filme tıkladılar işte burada seo devreye giriyor, site içi aramada ziyaretçinin linke tıklaması seo için çok katkı sağlayacaktır ve o aranan filmi arama motorlarında yükseltecektir.Yani site içi arama kutusu seo açısından büyük önem taşımaktadır.

Siteye arama kutusu eklemek

Adım 1: Blogumuza giriş yapıyoruz

Adım 2: Şu yolu izliyoruz: Kumanda paneli > Yerleşim > Gadget ekle > HTML/Javascript 

Aşağıdan İstediğimiz bir arama motorunun kodlarını oraya yapıştırıyoruz ve kaydediyoruz.

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA5MuQnhYf0WQwb8dun13mlVt1qyaSnfY2IAzCKxut1pgKpheEh35TKGwPUgHUCNl4vfVP5L1uXo3_wgnud2MFDCrSWAfjgpmiy-llS6c8iAPoA7yokXtdXXjhdygh6zpXgNOx1uJV7yI/h57/helperblogger.com-blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#helperblogger-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." 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">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_LY2TtU9AoLq1uwMOI2fVBvFu3bPMvSxJB1RSvxCNfRY_PzW5lJNRdiTgzt3WrOZcH7isj6NMbh2AsP1ofwMJhLV6Yb3ehXrnOP0cJqUv8wV1z-eQPPK1ppjVXQcP9cXrlwRxzZJDPE/s1600/helperblogger.com-white.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#helperblogger-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." 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">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2esEzpxe0rb4yX7yRqtuClQAFflzxUQ7PLAVoH-7ANo5r5pADJ6v9SvPjtR0SFKY3IZU0vfhIQ6Qid458xzxMJMfNoT2IegWIFC1r8Iic37GKOlfPReas7ZpaR7CH4m9NTWGbNmALyuU/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#helperblogger-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." 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>