Cara Membuat Search Box Seperti Search Box Google

Halo sobat blogger, kali ini saya akan share "Cara Membuat Search Box seperti Search Box Google" , oke silahkan di simak tutorialnya 

• Login Blogger
• buka Template > Edit HTML
• cari kode ]]></b:skin>
• masukkan kode dibawah ini tepat diatas ]]></b:skin>

#search {background: #fff;border-radius: 2px;} #search-form {color:gray;width:100%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #AAAAAA;border-radius:2px;} .search-button,.search-button:hover{background-color:#4D90FE;border:1px solid #0955d3;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}

setelah itu masuk Tata Letak > Add Gadget > HTML/Javascript dan masukkan kode dibawah ini 

<div id='search'><form id='searchform' action='/search' method='get' target='_blank'><input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari Disini....'/><button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFgGD14OYA8m5MJ-1c88i77gPA1zYhuO0qEcUovB91KGzYDHCPhsnkmtgCH90b-tRWiiAXdthZebIlPDICkXT0O2U3Vsrbngj36RQbKnmMvQXhXDCZ-x2NlRGBB-IwVoqLpN3iSYbLzlS/s1600/search.png' title='Search' width='21'/></button></form></div>

Simpan dan lihatlah hasilnya

Source