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 sajian 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 Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar


Kotak Pencarian merupakan elemen wajib ada di blog atau website Anda, semoga 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 arahan CSS berikut ini di atas arahan ]]></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 arahan width & height untuk menyesuaikan dengan lebar dan tinggi navigasi sajian blog Anda.

3. Copas arahan HTML expanding search kafe berikut ini di dalam arahan HTML navigasi sajian Anda, sebelum arahan </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 arahan JavaScript expanding search kafe berikut ini di atas arahan </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 arahan jQuery menyerupai ini:

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

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

6. Save!

Selesai.

CARA & KODE LAIN

Cara memasaing kotak pencarian expanding lainnya sebagai berikut:

1. Tema > Edit HTML
2. Simpan arahan berikut ini di atas arahan ]]></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 arahan berokut ini di atas arahan </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  arahan HTML navigasi sajian 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 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.idtutorial.com).*

Sumber

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours