Cara Memasang Tombol Search Di Blog

Ini Lah Cara Untuk Membuat Kotak Pencarian Di Blog
Pastinya Buat Pelanggan Blogger Tidak Bingung
So

Lets Go :
1. Buka Blogger, Klik Tanda Panah , Dan Klik Tata Letak

2. Klik Tambahkan Gadget ( Add Gadget )

3. Cari Html/JavaScript 

4. Copy Kode Di Bawah Ini :

 ---------------------------------------------------------------------------------------------------------

1.  <form action="http://02mei2000.blogspot.com/search"

method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti Teks Warna Merah Dengan Url Blog Anda

2.                                                                     

<span style='float:right;'> <style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiV7LFHGW_UYvyfofsjurqvqxrBN-LDfjLPuzIS0Ta-ygW7u9BrQio1aCUI8XrGIUfLfj_e8kfMqrPtPrtXfuwjb9v87TeHEocKdohp2hXUCAYOpHG0NtJUlHb3pd3VsWmaSc-YlKYjHjB/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"> <form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form> </div> </span>

Hasil:

3. 

    

<form action="/search" style="display:inline;" method="get"> <input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/> </form> <style> #s { margin: 0 auto; -webkit-appearance: none; -moz-appearance: none; padding: 12px 48px 12px 12px; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; width: 200px; height: 16px; color: #3a4449; border: none; outline: none; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); position: relative; z-index: 2; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfdsmcMNQ5HakYM_tqXFifpAYYRTCI425c1X-DJY5W1vBxqu95dQeus-sO9KnUfHfDNRRxGgxlNwhe0PIyFHxgy6NBB3hyrUhV08TdXtpu2dst_T2gJ5MPtxtaUKzrF0fbmUJZ5d1vKa8/s1600/Search.png) center right no-repeat; } #s::-webkit-input-placeholder, #s:-moz-placeholder { color: #607078; } </style>

Hasil :