Blogger jQuery Destekli Hareketli Arama Kutusu

27.7.17
Blogger jQuery Destekli Hareketli Arama Kutusu

Blogger jQuery Destekli Hareketli Arama Kutusu - Blog veya web sitesini tasarlamak için, birçok basit ve kullanışlı yeni özellikler var. Bu özelliklerden bir tanesi de farklı tasarımlara sahip arama kutusudur. Bu yazımızda jQuery destekli muhteşem bir arama kutusunu paylaşacağım.

jQuery Destekli Hareketli Arama Kutusu Nasıl Eklenir?


Arama kutusunu blogunuza eklemek için Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinin soltarafında bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki adımları uygulayın. Aranan kodlara daha hızlı erişmek için klavyenizin CTRL+F tuşlarını kullanabilirsiniz.

1- Aşağıdaki CSS kodlarını blogunuzda bulunan </head> kodunun bir satır üzerine ekleyin.

<style type='text/css'>
/*<![CDATA[*/
label#search-label{cursor:pointer}
label#search-label svg{width:24px;height:24px}
label#search-label svg path{fill:#666}
div#searchcontainer div{padding:5px;color:#efefef;text-align:center}
div#searchcontainer form{opacity:0;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);-webkit-transition:all .5s 0s;transition:all .5s 0s}
div#searchcontainer form input[type="text"]{width:100%;top:0;left:0;z-index:99;padding:10px;border:none;border-bottom:4px solid black;outline:none;font-size:3em;background:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html.opensearch div#searchcontainer{position:fixed;top:0;width:100%;height:100%;left:0;opacity:1;-webkit-transform:scale(1) translate3d(0,0,0);transform:scale(1) translate3d(0,0,0);-webkit-transition:-webkit-transform .5s,opacity .5s,left 0s 0s;transition:transform .5s,opacity .5s,left 0s 0s;z-index:9999}
html.opensearch div#searchcontainer .search_wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;padding:10% 5% 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html.opensearch div#searchcontainer:before{content:"";background:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
html.opensearch div#searchcontainer form{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition:all .5s .5s}
/*]]>*/
</style>

2- Aşağıdaki HTML ve jQuery kodunu blogunuzda bulunan </body> kodunun bir satır üzerine ekleyin.

<div id="searchcontainer">
<div class="search_wrapper">
    <form id="search" action='/search' method='get'>
    <input name='max-results' type='hidden' value='8'/>
    <input type="text" name="search-terms" id="search-terms" placeholder="Arama terimlerini yazın...">
    <div>Arama Sonuçları İçin Enter'a Basın</div>
    </form>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var fixedsearchbox=function(e){var n,o,t,a=e(document.documentElement),r=null!=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),s=r?"touchstart":"click",c=100,i=27,u={init:function(){n=e("#searchcontainer"),o=e("#search-terms"),t=e("#search-label"),t.on(s,function(e){n.css("top","px"),a.toggleClass("opensearch"),a.hasClass("opensearch")?(n.css("zIndex",c++),o.focus()):o.blur(),e.preventDefault(),e.stopPropagation()}),o.on(s,function(e){e.stopPropagation()}),e(document).on(s+" keyup",function(e){"keyup"==e.type&&e.keyCode!=i||(a.removeClass("opensearch"),o.blur())})}};return u}(jQuery);fixedsearchbox.init();
//]]>
</script>

3- Arama kutusunu görüntülenmesi için aşağıdaki arama simgesi butonunu blogunuzda ziyaretçilerinizin kolayca görebileceği bir menü veya alana ekleyin.

<label id="search-label" title="Search">
<svg viewBox="0 0 24 24">
<path fill="#222222" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</label>

Blogunuzu kaydedin ve arama kutusunu çalıştırmak için kontrol edin.

Arama kutusunun çalışmaması durumunda blogunuzun şablon kodları arasında bir Google jQuery kütüphanesinin olup olmadığını kontrol edin. Eğer blogunuzda herhangi bir Google jQuery kütüphanesi bulunmuyorsa aşağıdaki kodu blogunuzun kodunun bir satır üzerine ekleyin.


Buyazımız hareketli arama kutusu ile ilgili bilgiler paylaştık. Bu konu ile ilgili soru ve görüşleriniz için yorum bırakabilirsiniz.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

3 yorum

kodu ekleyince footerın altında büyük bir boşluk oluyor ve kötü duruyor sanırım jquery kodunu bir siteye yüklemek lazım

Cevap

arama kısmına ne yazarsam yazayım sadece tüm paylşatığım gönderiler çıkıyor.benim 1 tane müzik etiketim var müzik diye aratıyorum ama tüm gönderilerim çıkıyor.

Cevap

2. input kodunda name= searchterms kodu var onu silip yerine q yazın arama hatası çözülecektir.Ayrıca arkadaş html kodunu body kodunun üstüne atmamızı istemiş.yapmayın footerda çok büyük boşluk oluşuyor menü kodunun altında ekleyin son html kodunu

Cevap