Expanding Search Box Responsive Dan Mobile Friendly

Expanding Search Box Responsive Dan Mobile Friendly - Hallo sahabat firmware, Pada Artikel yang anda baca kali ini dengan judul Expanding Search Box Responsive Dan Mobile Friendly, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Credit Template, Artikel css, Artikel javascript, Artikel Search Box Blog, Artikel Tutorial, Artikel widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Expanding Search Box Responsive Dan Mobile Friendly
link : Expanding Search Box Responsive Dan Mobile Friendly

Expanding Search Box Responsive Dan Mobile Friendly

Expanding Search Box Responsive dan Mobile Friendly

Search Box responsive sangat penting bagi blog kita alasannya sering kali kita menerapkan sebuah search box yang kita terapkan malah pada versi mobile akan menghilang bahkan risikonya akan buruk selain itu search box pada blog merupakan tugas penting yang harus di terapkan alasannya search box merupakan fitur biar pengunjung blog dapat dengan gampang untuk mencari artikel pada blog kita atau blog tersebut mangka dari itu aku sarankan untuk menerapkan atau menciptakan Menu search box pada navigasi blog atau pada sidebar .

Maka dari itu teman tidak salah mampir ke blog alasannya aku akan memperlihatkan 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 dapat dibilang tidak mobile friendly. Nah disini aku akan memperlihatkan untuk anda kotak pencarian (Search box) yang responsive maupun mobile friendly dan di sini merupakan daerah yang pas untuk di jumpai.

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

Search Box Mobile Friendly

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

Cara memasang Search Box di Blogger - caranya sama menyerupai cara kebanyakan dan eksklusif saja , langkah pertama silahkan Login ke Blog dan cari sajian 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 arahan di bawah ini sempurna di atas arahan ]]></b:skin> .

/*====================================== Search Box by daerah 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 arahan </head> dan copy kde di bawah ini lalu paste arahan sempurna di atas arahan </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 kalau kalian mau memasangnya di Sidebar maka terapkan arahan di bawah ini pada Tata letak dan kalau kalian ingin memasangnya di Navigasi maka terapkan arahan di bawah ini di dalam Script navigasi , untuk memngetahiu cara memasangnya aku akan memperlihatkan panduan cara memasang scripnya baik di Tata letak Maupun di Navigasi sajian 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( 'sb-search' ) );</script>

Step: 1

Masuk ke dashboard
cari sajian Tata letak
kemudian pada sidebar Klik Add gadget / Tambahkan Gadget lalu cari HTML/javascript dan paste arahan di atas ke Html tersebut .

Step : 2

Cari dulu Navigasi teman Biasanya kalo navigasinya kaya aku ialah di sebelah header cari dulu headernya dan cari sajian navigasinya kalo sudah paste di dalam sajian navigasi tersebut menyerupai pola di bawah .

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

Demikianlah Artikel Expanding Search Box Responsive Dan Mobile Friendly

Sekianlah artikel Expanding Search Box Responsive Dan Mobile Friendly kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Expanding Search Box Responsive Dan Mobile Friendly dengan alamat link https://filefirmware.blogspot.com/2013/10/expanding-search-box-responsive-dan.html