Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar
August 31, 2018
Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar
Kotak Pencarian Expanding Search Bar adalah kotak pencarian yang biasa dipasang di bagian kanan navigasi menu blog sejajar dengan menu-manu lainnya. Disebut expanding karena hanya tampil berupa icon search dan area pencarian baru muncul ketika icon itu diklik.
Kotak Pencarian merupakan elemen wajib ada di blog atau website Anda, agar blog menjadi ramah pengguna (user friendly). Gaya atau desain kotak pencarian lainnya ada di Desain Kotak Pencarian.
2. Cops kode CSS berikut ini di atas kode ]]></b:skin>
Anda bisa mengatur lebar dan tingginya di kode width & height untuk menyesuaikan dengan lebar dan tinggi navigasi menu blog Anda.
3. Copas kode HTML expanding search bar berikut ini di dalam kode HTML navigasi menu Anda, sebelum kode </ul> </nav>
4. Pasang kode JavaScript expanding search bar berikut ini di atas kode </body>
5. Pastikan di template blog Anda sudah terpasang link ke kode jQuery seperti ini:
Jia belum ada, copas kode tersebut di atas kode </head>
6. Save!
Selesai.
CARA & KODE LAIN
Cara memasaing kotak pencarian expanding lainnya sebagai berikut:
1. Tema > Edit HTML
2. Simpan kode berikut ini di atas kode ]]></b:skin>
3. Copas kode berokut ini di atas kode </head> atau </body>
4. Pemasang Search Boxnya kode HTML navigasi menu Anda, sebelum kode </ul> </nav>
5. Save! Simpan tempate. Selesai.
Untuk Fullscreen Search Box bisa terapkan tips dari W3School.
Demikian Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar. Good Luck & Happy Blogging! (www.contohblog.com).*
Sumber
Kotak Pencarian Expanding Search Bar adalah kotak pencarian yang biasa dipasang di bagian kanan navigasi menu blog sejajar dengan menu-manu lainnya. Disebut expanding karena hanya tampil berupa icon search dan area pencarian baru muncul ketika icon itu diklik.
Kotak Pencarian merupakan elemen wajib ada di blog atau website Anda, agar 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 HTML2. Cops kode CSS berikut ini di atas kode ]]></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 bisa mengatur lebar dan tingginya di kode width & height untuk menyesuaikan dengan lebar dan tinggi navigasi menu blog Anda.
3. Copas kode HTML expanding search bar berikut ini di dalam kode HTML navigasi menu Anda, sebelum kode </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 == '') {this.value = 'Press Enter to Submit';}' onfocus='if (this.value == 'Search...') {this.value = '';}' type='text' value='Search...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>
4. Pasang kode JavaScript expanding search bar berikut ini di atas kode </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 kode jQuery seperti ini:
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Jia belum ada, copas kode tersebut di atas kode </head>
6. Save!
Selesai.
CARA & KODE LAIN
Cara memasaing kotak pencarian expanding lainnya sebagai berikut:
1. Tema > Edit HTML
2. Simpan kode berikut ini di atas kode ]]></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 kode berokut ini di atas kode </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 kode HTML navigasi menu 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( 'sb-search' ) );
</script>
5. Save! Simpan tempate. Selesai.
Untuk Fullscreen Search Box bisa terapkan tips dari W3School.
Demikian Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar. Good Luck & Happy Blogging! (www.contohblog.com).*
Sumber
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
No comments on Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar
Post a Comment