Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar

Kotak Pencarian Expanding Search Bar yaitu kotak pencarian yang biasa dipasang di bab kanan navigasi hidangan blog sejajar dengan menu-manu lainnya. Disebut expanding karena hanya tampil berupa icon search dan area pencarian gres muncul saat icon itu diklik.

Cara Memasang Kotak Pencarian Keren di Menu Blog  Cara buat blog itu- Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar


Kotak Pencarian merupakan elemen wajib ada di blog atau website Anda, biar blog menjadi ramah pengguna (user friendly). Gaya atau desain kotak pencarian lainnya ada di Desain Kotak Pencarian.

Cara Memasang Kotak Pencarian Expanding Search Bar

1. Tema > Edit HTML
2. Cops aba-aba CSS berikut ini di atas aba-aba ]]></b:skin>

#search_box{width:300px;position:relative;height:40px;float:right;}
#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}
#search_box #search #search_text{color:#888;width:250px;padding:10px;font-size:16px;border:0 none;height:49px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s}
#search_box #search #search_text:focus{background:#efefef}
#search_box .search_button{float:right;color:#222;height:50px;width:50px;text-align:center;line-height:45px;display:inline-block;cursor:pointer;font-size: 20px;}
#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff}

Anda dapat mengatur lebar dan tingginya di aba-aba width & height untuk menyesuaikan dengan lebar dan tinggi navigasi hidangan blog Anda.

3. Copas aba-aba HTML expanding search kafetaria berikut ini di dalam aba-aba HTML navigasi hidangan Anda, sebelum aba-aba </ul> </nav>

<div id='search_box'><form action='/search' id='search' method='get'>
<input class='search_text' id='search_text' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Press Enter to Submit&apos;;}' onfocus='if (this.value == &apos;Search...&apos;) {this.value = &apos;&apos;;}' type='text' value='Search...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>

4. Pasang aba-aba JavaScript expanding search kafetaria berikut ini di atas aba-aba </body>

<script type='text/javascript'>
//<![CDATA[
!function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()
//]]>
    </script>

5. Pastikan di template blog Anda sudah terpasang link ke aba-aba jQuery menyerupai ini:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Jia belum ada, copas aba-aba tersebut di atas aba-aba </head>

6. Save!

Selesai.

CARA & KODE LAIN

Cara memasaing kotak pencarian expanding lainnya sebagai berikut:

1. Tema > Edit HTML
2. Simpan aba-aba berikut ini di atas aba-aba ]]></b:skin>

.sb-icon-search{background-color:#138be6;transition:all .4s ease-in-out;z-index:90}
.sb-icon-search,.sb-search-submit{cursor:pointer;display:block;margin:0;padding:0;position:absolute;text-align:center;top:0}
.sb-icon-search:before{color:#fff;content:"\f002";font-family:FontAwesome;font-size:18px;font-style:normal;font-weight:400;text-align:center}
.sb-icon-search:hover{background-color:#2c4584;transition:all .4s ease-in-out}
.sb-search{overflow:hidden;position:absolute;top:0;transition:width .3s;width:0}
.sb-search.sb-search-open{width:100%}
.sb-search-input{background-color:#2c4584;border:none;color:fff!important;font-family:arial;font-size:18px;height:60px;margin:0;outline:none;position:absolute;top:0;width:100%;z-index:90}
.sb-search-input::-webkit-input-placeholder{color:#fff}
::-moz-placeholder{color:#fff}
:-moz-placeholder{color:#fff}
:-ms-input-placeholder{color:#fff}
input[type=search].sb-search-input{color:#fff}
input[type='text'].sb-search-input{color:#f1f1f1}
.sb-icon-search{border-right:0 solid #111}
.sb-icon-search,.sb-search-submit{right:0}
.sb-search{right:0;top:0}
.sb-search-input{padding-left:10px;right:0}
.sb-search{min-width:55px;height:60px;}
.sb-icon-search:before{line-height:55px;}
.sb-icon-search,.sb-search-submit{width:55px;height:60px;line-height:55px}

3. Copas aba-aba berokut ini di atas aba-aba </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
(function(e){"use strict";function t(){var t=false;(function(e){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(e.substr(0,4)))t=true})(navigator.userAgent||navigator.vendor||e.opera);return t}function n(e,t){this.el=e;this.inputEl=e.querySelector("form > input.sb-search-input");this._initEvents()}!e.addEventListener&&e.Element&&function(){function e(e,t){Window.prototype[e]=HTMLDocument.prototype[e]=Element.prototype[e]=t}var t=[];e("addEventListener",function(e,n){var r=this;t.unshift({__listener:function(e){e.currentTarget=r;e.pageX=e.clientX+document.documentElement.scrollLeft;e.pageY=e.clientY+document.documentElement.scrollTop;e.preventDefault=function(){e.returnValue=false};e.relatedTarget=e.fromElement||null;e.stopPropagation=function(){e.cancelBubble=true};e.relatedTarget=e.fromElement||null;e.target=e.srcElement||r;e.timeStamp=+(new Date);n.call(r,e)},listener:n,target:r,type:e});this.attachEvent("on"+e,t[0].__listener)});e("removeEventListener",function(e,n){for(var r=0,i=t.length;r<i;++r){if(t[r].target==this&&t[r].type==e&&t[r].listener==n){return this.detachEvent("on"+e,t.splice(r,1)[0].__listener)}}});e("dispatchEvent",function(e){try{return this.fireEvent("on"+e.type,e)}catch(n){for(var r=0,i=t.length;r<i;++r){if(t[r].target==this&&t[r].type==e.type){t[r].call(this,e)}}}})}();!String.prototype.trim&&(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")});n.prototype={_initEvents:function(){var e=this,t=function(t){t.stopPropagation();e.inputEl.value=e.inputEl.value.trim();if(!classie.has(e.el,"sb-search-open")){t.preventDefault();e.open()}else if(classie.has(e.el,"sb-search-open")&&/^\s*$/.test(e.inputEl.value)){t.preventDefault();e.close()}};this.el.addEventListener("click",t);this.el.addEventListener("touchstart",t);this.inputEl.addEventListener("click",function(e){e.stopPropagation()});this.inputEl.addEventListener("touchstart",function(e){e.stopPropagation()})},open:function(){var e=this;classie.add(this.el,"sb-search-open");if(!t()){this.inputEl.focus()}var n=function(t){e.close();this.removeEventListener("click",n);this.removeEventListener("touchstart",n)};document.addEventListener("click",n);document.addEventListener("touchstart",n)},close:function(){this.inputEl.blur();classie.remove(this.el,"sb-search-open")}};e.UISearch=n})(window);(function(e){"use strict";function t(e){return new RegExp("(^|\\s+)"+e+"(\\s+|$)")}function s(e,t){var s=n(e,t)?i:r;s(e,t)}var n,r,i;if("classList"in document.documentElement){n=function(e,t){return e.classList.contains(t)};r=function(e,t){e.classList.add(t)};i=function(e,t){e.classList.remove(t)}}else{n=function(e,n){return t(n).test(e.className)};r=function(e,t){if(!n(e,t)){e.className=e.className+" "+t}};i=function(e,n){e.className=e.className.replace(t(n)," ")}}var o={hasClass:n,addClass:r,removeClass:i,toggleClass:s,has:n,add:r,remove:i,toggle:s};if(typeof define==="function"&&define.amd){define(o)}else{e.classie=o}})(window)
//]]>
</script>

4. Pemasang Search Boxnya  aba-aba HTML navigasi hidangan Anda, sebelum kode </ul> </nav>

<div class='sb-search' id='sb-search'>
<form action='/search'>
<input class='sb-search-input' id='search' name='q' placeholder='Enter your search term...' type='text' value=''/>
<input class='sb-search-submit' type='submit' value=''/>
<span class='sb-icon-search'/>
</form>
</div>
<script>
new UISearch( document.getElementById( &#39;sb-search&#39; ) );
</script>

5. Save! Simpan tempate. Selesai.

Untuk Fullscreen Search Box dapat terapkan tips dari W3School.

Cara Memasang Kotak Pencarian Keren di Menu Blog  Cara buat blog itu- Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar


Demikian Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar. Good Luck & Happy Blogging! (www.carabuatblogitu.com).*

Sumber

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours