Cara Membuat Search Box Seperti Evolotemplate di Blog

Cara Membuat Search Box Seperti Evolotemplate di Blog - Hallo sobat blogger, selamat datang di blog saya , kali ini saya akan mengshare Cara Membuat Search Box Seperti Evolotemplate di Blog, yuk sobat blogger semua simak tutorial berikut ini Cara Membuat Search Box Seperti Evolotemplate di Blog:

Berikut adalah  Cara membuat Search Box Seperti Evolotemplate di Blog:

1. Silahkan Login Blogger >> Tata Letak >> Edit HTML

2. Masukan kode dibawah ini di atas ]]></b:skin>

/* SEARCH BOX  */
#searchbox-wrap {
margin:21px 20px 20px 0;
overflow:hidden;
}
#searchthis {
position:relative;
margin:0 0 0 0;
}
#search-btn {
position:absolute;
right:10px;
top:10px;
transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
height:30px;
line-height:30px;
background:#07ACEC;
color:#fff;
padding:0 10px;
border:0 none;
font-weight:bold;
}
#search-btn:hover {
cursor:pointer;
background:#333;
}
#search-box {
transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
height:40px;
line-height:40px;
display:block;
float:left;
background:#fff;
padding:0 100px 0 10px;
border:5px solid #EDEFF1;
width:180px;
}
#search-box:focus, #search-box:hover {
outline:none;
border:5px solid #07ACEC;
}

3. Simpan template

4. Masukankan kode di bawah ini kedalam Widget baru >> HTML/Javascript

<div id='searchbox-wrap'>
<form action='/search' id='searchthis' method='get'>
<input id='search-box' name='q' placeholder=' Search Template ' size='40' type='text'/>
<input id='search-btn' type='submit' value='Search'/>
</form>
</div>

5. Simpan dan selesai

Sekian dari saya tentang Cara Membuat Search Box Seperti Evolotemplate di Blog, semoga bermanfaat, dan terimakasih telah berkunjung ke blog saya.
Jika ada kritik dan saran silahkan saja anda berkomentar.