Cara membuat search box Expanding

Assalamualaiqum.wr.wb



Seperti yang telah saya jadwalkan hari ini saya akan membuat tutorial Cara membuat search box Expanding, Seperti apa? Untuk melihat demonya kalian bisa lihat bawah ini


Sangat simpel karna cukup menggunakan html dan css, dan juga ringan untuk di pasang di mana sajah, saya tidak mengarahkan untuk memasang di blogspot ataupun di wordpress Semua terserah kalian Karna setiap layanan blog entah itu wordpres atau blogspot punya Get action berdeda beda jadi kalian bisa menyesuaikan nya sendiri

Css*

.search-form {
 position: absolute;
 right: 20px;
 top: 1px;
  border-radius:15px 15px 15px 15px;
}

.search-field {
 background-color: transparent;
 background-image: url(http://hasselpalm.com/wp-content/themes/twentythirteen/images/search-icon.png);
 background-position: 5px center;
 background-repeat: no-repeat;
 background-size: 24px 24px;
 border: none;
 cursor: pointer;
height:37px;
margin: 5px 0;  
padding: 0 0 0 30px;   
border-radius:15px 15px 15px 15px;  
position: relative;  
-webkit-transition: width 700ms ease, background 400ms ease;  
transition:  width 700ms ease, background 400ms ease;  
width: 0; }  

.search-field:focus {  
background-color: #fff;  
border: 1px solid blue;   
border-radius:15px 15px 15px 15px;  
cursor: text;  outline: 0; width: 300px; }  
.search-submit {   
display: none; }  
input[type="search"] {   -webkit-appearance: textfield; }

Penting!
Kalian bisa sesuaikan lebar dan tinggi dengan kode yang saya tandai warna merah

HTML*

<form role="search" method="get" class="search-form" action="http://www.webcensar.com/search?">
    <label>
     <input type="search" 
                class="search-field" 
                placeholder="Cari, Tutorial dan app"  
                value="" name="s" 
                title="efter:">
    </label>
    <input type="submit" class="search-submit" value="Cari, Tutorial Dan Apps">
   </form>

Kalian bisa sesuaikan Get Action sendiri atau kalian ganti url http://www.webcensar.com dengan url kalian

Seperti biasa salam hangat dan terimakasih #heppy

Baca juga