Blogger Google Özel Arama Motoru Oluşturma

Blogger siteleri için site içi arama yapmayı kolaylaştırın. Blog okuyucularının Blogger web sitenizde arama yaparak blog içeriklerine daha kolay bulabilmelerine yardımcı olabilmek için Blogger sitenizde Google Özel Arama Oluşturarak blogunuzun ana sayfasına özel bir arama kutusu ekleyebilirsiniz.


Blogger Özel Arama Motoru - Google

1. Google Özel Arama Motoru Oluştur'a tıklayarak açılan sayfada Özel arama motoru oluştur butonuna tıklayın.

2. Açılan sayfada Arama yapılacak Blogger sitelerini ekleyeceğiniz alan gelmektedir. Kaç Blogger sitesi eklemek istiyorsanız alt alta ekleyebilirsiniz. Yine aynı sayfada dil seçeneklerini ayarlayarak ve Arama motorunun adı yani arama kutusu içerisinden görünecek olan metni yazın ve oluştur butonuna tıklayın.

3. Tebrikler Blogger özel arama motorunuzu başarıyla oluşturdunuz. Bu sayfada bulunan Kontrol Paneli butonuna tıklıyoruz. Açılan sayfada sol tarafta yer alan sütunda Kurulumun hemen altında yer alan Görünüm ve tarz butonuna tıklayın ve açılan sayfada arama motorunuzun nasıl görüneceğini belirleyin, bizim paylaşmış olduğumuz koda uygun olarak İki sütun olan görünümü tercih edebilirsiniz ve ardından kaydet butonuna tıklayın.

4. Aynı sayfanın üst bölümünde bulunan Temalar sekmesine tıklayarak temanızı Varsayılan olarak belirleyin ve kaydet butonuna basın.

5. Aynı sayfada sol menüde yer alan Kurulum sekmesine tıklayın, ayrıntılar bölümünde yer alan Arama motoru kimliği butonuna tıklayın ve 009300000000008886846:43hi1buggpu benzer arama motoru kimliğinizi kopyalayın.

6. Hazırlamış olduğumuz Özel Arama Kutusunu Blogger sitemize uygulamak için aşağıdaki HTML kodu Blogger hesabınıza giriş yaparak Yerleşim > Sidebar bölümünde Gatget Ekle > HTML / JavaScript içerisine aşağıdaki HTML kodu ekleyin ve kaydedin.

<div id='search-box'>
<div id='gcsengine'></div>
<div id='gcsresults'></div>
</div>

7. Kumanda panelinden Tema > HTML'i Düzenle ve CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki kodu </head> kodunun bir satır üzerine ekleyin.

<style type='text/css'>
#search-box{width:100%;padding:0;margin:0 auto}
.gsc-results-wrapper-visible{background:#fff;padding:0 0 10px!important;-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);-moz-box-shadow:0 3px 5px rgba(0,0,0,.2);box-shadow:0 3px 5px rgba(0,0,0,.2);border:1px solid #ddd!important;width:400px;height:auto;max-height:500px;position:absolute!important;top:100%;right:0;z-index:10000;margin:10px 0 0;overflow:auto}
.gsc-search-box-tools .gsc-search-box .gsc-input{padding-right:5px!important;}
.cse .gsc-search-button input.gsc-search-button-v2,input.gsc-search-button-v2{padding:6px!important}
input.gsc-search-button{margin-top:3px!important;margin-left:0!important}
.cse .gsc-control-cse,.gsc-control-cse{background-color:#fff;border:none!important;padding:0!important}
#gs_cb50,#gs_st50,.gsib_b{vertical-align:middle}
a.gsst_a{line-height:1}
.gsc-result .gs-title{height:auto!important;word-wrap:break-word}
.gsc-results-wrapper-visible table.gsc-search-box{position:relative}
.gsc-results-wrapper-visible table{border-collapse:collapse;border-spacing:0}
.gsc-results-wrapper-visible table.gsc-search-box{border-style:none;border-width:0;border-spacing:0 0;width:100%;margin-bottom:0!important}
.gsc-results-wrapper-visible table.gsc-search-box td.gsc-input{padding-right:5px!important}
.gs-web-image-box-landscape img.gs-image,.gs-web-image-box-portrait img.gs-image{margin-left:7px;max-width:60px!important;max-height:60px!important}
.gs-image-box.gs-web-image-box.gs-web-image-box-portrait{width:80px!important}
.gs-webResult.gs-result a.gs-title:link{padding-left:0!important}
.gs-promotion div.gs-visibleUrl-long,.gs-promotion div.gs-visibleUrl-short,.gs-result .gs-title:hover,.gs-result .gs-title:hover *,.gs-webResult div.gs-visibleUrl-long,.gs-webResult div.gs-visibleUrl-short{color:#e8554e!important;transition:all .4s ease-in-out}
.gs-result .gs-title,.gs-result .gs-title *{color:#333!important;text-decoration:none!important}
.gs-result .gs-snippet{font-weight:400;word-wrap:break-word}
.gsc-control-cse .gsc-table-result b,.gsc-control-cse b{color:000!important;transition:all .4s ease-in-out}
.gsc-orderby-container{padding-right:10px!important;}
@media screen and (max-width:414px){.gsc-results-wrapper-visible{width:100%!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
}
</style>

8. Aşağıdaki Javascript kodunu </body> kodunun bir satır üzerine ekleyin. Daha önce oluşturmuş olduğumuz Arama motoru kimliğini kod içerisinde belirtilen yere ekleyin ve şablonu kaydedin.

<script type='text/javascript'>
//<![CDATA[
var gcseDiv=document.getElementById("gcsengine");gcseDiv.innerHTML="<gcse:searchbox></gcse:searchbox>",function(){var e="009300000000008886846:43hi1buggpu",t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"==document.location.protocol?"https:":"http:")+"//www.google.com/cse/cse.js?cx="+e;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(t,c)}();
function myFunction() {
    document.getElementById("gcsresults").innerHTML = "<gcse:searchresults></gcse:searchresults>";
}myFunction();
//]]>
</script>

NOT: Sizlerle paylaşmış olduğumuz Blogger Google Özel Arama Motoru Oluşturma konulu yazımızda anlatılanların Blogger HTML5 uyumlu temalar için olduğu ve HTML5 uyunlu temanızın olmadığını düşünüyorsanız sitemizin header menü içerisinde yer alan Temalar kategorisinden Blogger HTML5 uyumlu temalara ulaşabilirsiniz.

Bknz: Neden Bir Blogger Web Sitesinin Mobil Uyumlu Olması Önemli?

Blogger Google Özel Arama Motoru Oluşturma hakkında daha fazla bilgi için  yorum formuna görüş ve sorularınızı bize iletebilirsiniz.