close


Expanding Search Box Responsive dan Mobile Friendly


Search Box Responsive dan Mobile Friendly keren
Expanding Search Box Responsive dan Mobile Friendly 

Search Box responsive sangat penting bagi blog kita karena sering kali kita menerapkan sebuah search box yang kita terapkan malah pada versi mobile akan menghilang bahkan hasilnya akan jelek selain itu search box pada blog merupakan peran penting yang harus di terapkan karena search box merupakan fitur agar pengunjung blog bisa dengan mudah untuk mencari artikel pada blog kita atau blog tersebut mangka dari itu saya sarankan untuk menerapkan atau membuat Menu search box pada navigasi blog atau pada sidebar .

Maka dari itu sobat tidak salah mampir ke blog karena saya akan memberikan Sebuah search box yang wajib di coba ke website atau blog kalian , Sebenarnya, situs blogger sudah menyediakan sistem widget pencarian default (Search box), tetapi widget pencarian tersebut tidak responsive atau bisa dibilang tidak mobile friendly. Nah disini saya akan memberikan untuk anda kotak pencarian (Search box) yang responsive maupun mobile friendly dan di sini merupakan tempat yang pas untuk di jumpai.

yakin Search Boxnya Mobile Friendly ? jika sobat nggak percaya lihat search Box yang saya pake di atas sama bukan ? nah jika masih ragu saya menyediakan screenshootnya di bawah ini .

Search Box Mobile Friendly
Search Box Mobile Friendly 

Lantas bagaimana cara memasangnya ? tenang berikut cara untuk memasang Search box responsive dan Mobile Friendly .

Cara memasang Search Box di Blogger - caranya sama seperti cara kebanyakan dan langsung saja , langkah pertama silahkan Login ke Blog dan cari menu Template Kemudian klik Edit HTML dan Cari kode ]]></b:skin> untuk lebih cepat silahkan tekan keyword dengan menekan secara bersamaan Ctrl-F Setelah itu paste/tempel kode di bawah ini tepat di atas kode ]]></b:skin> .

/*====================================== Search Box by tempat ngeblog=====================================*/.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}.showpageOf{right:0}/*====================================== L. Shortcodes=====================================*/.dropcaps{color:#F24024;font-size:75px;line-height:60px;padding-top:4px;font-family:Georgia}.button{color:#fff;font-weight:400;display:block;text-decoration:none;padding:8px 18px;margin:5px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;-webkit-box-shadow:inset 0 -2px rgba(0,0,0,0.15);box-shadow:inset 0 -2px rgba(0,0,0,0.15)}.button.small{font-size:12px;color:#fff}.button.medium{font-size:16px;color:#fff}.button.large{font-size:20px;color:#fff}.button.small:hover{filter:alpha(opacity=60);opacity:.9;color:#fff}.button.medium:hover{filter:alpha(opacity=60);opacity:.9;color:#fff}.button.large:hover{filter:alpha(opacity=40);opacity:.9;color:#fff}.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}



Setelah itu cari kode </head> dan copy kde di bawah ini kemudian paste kode tepat di atas kode </head> Jika sudah silahkan simpan .
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'/><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>

Terakhir , untuk memasang Search Boxnya terserah kalian sendiri jika kalian mau memasangnya di Sidebar maka terapkan kode di bawah ini pada Tata letak dan jika kalian ingin memasangnya di Navigasi maka terapkan kode di bawah ini di dalam Script navigasi , untuk memngetahiu cara memasangnya saya akan memberikan panduan cara memasang scripnya baik di Tata letak Maupun di Navigasi menu atau di Header .

<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>
         Step: 1 
  • Masuk ke dashboard 
  • cari menu Tata letak
  • kemudian pada sidebar Klik Add gadget / Tambahkan Gadget kemudian cari HTML/javascript dan paste kode di atas ke Html tersebut .


Expanding Search Box Responsive dan Mobile Friendly


     Step : 2
  • Cari dulu Navigasi sobat Biasanya kalo navigasinya kaya saya yaitu di sebelah header cari dulu headernya dan cari menu navigasinya kalo sudah paste di dalam menu navigasi tersebut seperti contoh di bawah .
Expanding Search Box Responsive dan Mobile Friendly


Setelah itu silahkan sobat Save dan lihat hasilnya , bagaimana keren bukan ? tentu keren dong apalagi sobat bersedia share atau like artikel saya dalam kutipan saya kali ini dan jangan lupa bila ada pertanyaan silahkan dengan senang hati untuk berkomentar pada kotak komentar saya dan mohon maaf untuk tidak memberi komentar dengan Link aktf atau mati , Sekian dalam kutipan saya kali ini sampai jumpa di artikel selanjutnya .



3 Responses to "Expanding Search Box Responsive dan Mobile Friendly "

  1. Berhasil saya praktekan. Makasih yah :D

    BalasHapus
  2. Saya sudah punya search box gan, mungkin akan saya coba lain waktu

    BalasHapus
  3. Akhirnya ketemu nih tutorial yang paling bagus!
    Saya juga mau pakai yang seperti itu gan!

    BalasHapus

Silahkan berkomentar sesuai isi Artikel :)