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.
0 komentar: