Here's how to create a cool search box on your blog

Bantu KLIK iklan ini gan!!!!

Hallo welcome to blogger template-blogger.com today we'll learn how to create a widged or the search box to search the blog. trick is very very suitable for you who want to modify the look of the blog. widged search or the search box is a means that would make it easier for visitors to find articles that are in need: you are in accordance with the diketiknya keyword.

Okay blogger friend now we will discuss how to make this search widged:

1. Log into your blog account
2. go to dashboard > > layout
3. click Add gadgets
4. click HTML/Javascript
5. Input script code below:

Widged seacrh box V.1

<style>#search-box { position: relative; width: 100%; margin: -15px 0px -20px 0; }  #search-form { height: 40px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; }  #search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; }  #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #4d90fe; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; } </style> <div id='search-box'><form action='/search' id='search-form' method='get' target='_top'><input id='search-text' name='q' placeholder='Search here...' type='text'/><button id='search-button' type='submit'><span>Search</span></button></form></div>

Widged Seach Box V.2

<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/AVvXsEjc4oF5DOEH-Ht_MX2FSDOTITB8QygJtGrlv_v17Jwo45skU2stkWJkjDEHcCdZVPkcI4ZpP2mZzzl6mq6D6uPF6RaboD_m-vZyaR6_i1nTK8Vii27MkNuUrvj2K9pStjyTNhdAOTMTeN0/s1600/Search.png) center right no-repeat;     }     #s::-webkit-input-placeholder, #s:-moz-placeholder {         color: #607078;     }     </style>

Okay friend blogger, that's the last few tricks creating search box blog, good luck friends:-D Bantu KLIK iklan ini gan!!!!