Ana Sayfa Blogger İpuçları jQuery Widget Popup Google Özel Arama Kutusu Oluşturma

Popup Google Özel Arama Kutusu Oluşturma

Arlina Design: Popup Google Özel Arama Kutusu Oluşturma 9.10.16
Unknown
Popup Google Özel Arama Kutusu Oluşturma

Blog sitemizde daha önce Google Özel Arama Motoru hakkında bilgi vermiştik. Şimdi bu arama motorunu blogunuzda üstbilgi veya blogunuzun diğer menülerine bir pop-up düğmesi ekleyerek arama kutusu oluşturacağız.

Arama düğmesine tıklandığında, Google Özel Arama Motoru Kutusu belirecek ve arama sonuçları arama kutusunun altında görünecektir.

Aşağıdaki demo butonuna tıklayarak açılan sayfada sol üst köşedeki arama simgesini tıklayın.


Bu uygulamayı blogunuza eklmek isterseniz, lütfen aşağıdaki adımları uygulayın.

Pop-Up Google Özel Arama Motoru Kutusu Nasıl Eklenir?

1. Blogunuzda arama simgesinin nerede görünmesini istiyorsanız aşağıdaki kodu oraya ekleyin. Örneğin blogunuzun başlık kısmının hemen altına eklerseniz simge blogunuzun başlığının altında görünecektir. 
<a href='javascript:void(0)' class='aramabutton' onclick='Searchopenbox()' title='Arama için tıklayın'></a>
2. Aşağıdaki CSS kodunu blogunuzun şablon kodları arasında bulunan </head> kodunun bir satır üzerine ekleyin. 
<style type='text/css'>
.aramabutton{text-decoration:none}
.aramabutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:none;position:relative;}
.arama-kutusu{position:fixed;top:8%;left:10%;right:10%;max-width:900px;background:rgba(255,255,255,1);color:rgba(0,0,0,.5);box-shadow:0 2px 7px rgba(0,0,0,.3);display:none;visibility:hidden;padding-top:53px;}
.arama-kutusu.active{display:block;visibility:visible;margin:auto;z-index:1002;-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.2,.2,.2);transform:scale3d(.2,.2,.2)}
50%{opacity:1}}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.2,.2,.2);transform:scale3d(.2,.2,.2)}
50%{opacity:1}}
.arama-kutusu .inputpoint {background:#222;margin:0 auto;padding:10px 10px 6px;position:absolute;top:0;left:0;right:0}
#aramakutusu-katman{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.7);display:none;z-index:1001}
.arama-kutusu .kapat-aramakutusu{cursor:pointer;position:absolute;top:-19px;right:-19px;width:19px;height:19px;padding:0;margin:0;border:0;outline:0;font-weight:bold;color:#999;font-size:24px;font-family: Arial;text-align:center;line-height:19px;transition:all .3s;z-index:999}
.arama-kutusu .kapat-aramakutusu:hover {color:fafafa;}
.arama-sonuclari .gsc-results-wrapper-visible{max-height: calc(101vh - 201px);overflow-y:auto;margin-bottom:10px}
.gsc-input-box{border-radius:2px}
.gsc-input-box-focus,.gsc-arama-kutusu .gsc-input>input:focus{border:1px solid #b9b9b9!important;border-top-color:#b9b9b9!important;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;outline:0!important}
.gsc-results-wrapper-visible{background:#fefefe;padding:0 10px!important;border:none;width:100%;height:100%;margin:10px 0 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.gsc-arama-kutusu-tools .gsc-arama-kutusu .gsc-input{padding-right:5px!important;font-family:Roboto,Arial,sans-serif!important;font-size:14px!important;font-weight:500!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:#fefefe;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}
table.gsc-table-result{border-collapse:collapse;border-spacing:0}
table.gsc-arama-kutusu{border-style:none;border-width:0;border-spacing:0 0;width:100%;margin-bottom:0!important}
table.gsc-arama-kutusu 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: 0.5em;max-width: 4.462em!important;max-height: 4.462em!important;}
.gs-image-box.gs-web-image-box.gs-web-image-box-landscape,.gs-image-box.gs-web-image-box.gs-web-image-box-portrait{width:70px!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:#357ae8!important}
.gs-result .gs-title,.gs-result .gs-title *{color:#008000!important;text-decoration:none!important}
.gsc-control-cse,.gsc-control-cse .gsc-table-result{font-family:Roboto,Arial,sans-serif!important;font-size:13px}
.gs-result .gs-snippet{font-weight:500;word-wrap:break-word;padding-left:10px!important}
.gsc-control-cse .gsc-table-result b,.gsc-control-cse b{font-weight:700!important;color:000!important;transition:all .4s ease-in-out}
.gsst_a .gscb_a{font-family:Roboto,Arial,sans-serif!important;font-size:18px!important;font-weight:700!important;color:#444!important}
.gsst_a:focus .gscb_a,.gsst_a:hover .gscb_a{color:#444!important}
.gsc-control-wrapper-cse{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
</style>
Biz bu pop-up arama kutusunu oluştururken Font Awesome kullandık. Simgelerin görünmesi için blogunuzda Font Awesome yüklü olup olmadığı kontrol edin. Yorum kısmından bize danışabilirsiniz.

3. Aşağıdaki kod grubunu blogunuzun şablon kodları arasında bulunan </body> kodunun bir satır üzerine ekleyin. 
<div class='arama-kutusu' id='arama_kutusu'>
<div class='inputpoint'>
<script>
//<![CDATA[
  (function() {
    var cx = '001431127304379500460:0gsxr2wr-wg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
//]]>
</script>
<gcse:searchbox></gcse:searchbox>
</div>
<div class='arama-sonuclari'>
<gcse:searchresults></gcse:searchresults>
</div>
<div class="kapat-aramakutusu" onclick="Searchhidebox()"><span>&#215;</span></div>
</div>
<div id='aramakutusu-katman'></div>
<script>
//<![CDATA[
function Searchopenbox(){document.getElementById("arama_kutusu").classList.toggle("active");document.getElementById("aramakutusu-katman").style.display = "block";}
function Searchhidebox(){document.getElementById("arama_kutusu").classList.toggle("active");document.getElementById("aramakutusu-katman").style.display = "none";}
//]]>
</script>


Açıklama;

Yukarıdaki kod içerisinde bulunan Google Özel Arama Motoru ID'si yerine kendi ID'nizi ekleyin. Bu ID sizin arama motoru kimliğinizdir. Bu konu hakkında bilgiyi daha önce sizlerle paylaşmıştık. Yeni bir Google Arama Motoru kimliği oluşturmak için tıklayın: Google Arama Motoru Edinme. Bu yayınımız hakkında görüşlerinizi yorum kısımından bizimle paylaşır mısınız lütfen.

Yorum Gönder