Cara Membuat Searchbox Seperti Evotemplate

Cara Membuat  Searchbox Seperti Evotemplate - Selamat pagi semuanya , selamat datang di blog saya . Kali ini saya akan mengshare sebuat toturial blog yaitu Cara Membuat  Searchbox Seperti Evotemplate .Searchbox ini memudahkan pengunjung blog anda untuk mencari artikel blog anda . Jika anda ingin membuat Searchbox yang keren  silahkan saja perhatikan tutorial berikut ini .

Searchbox Evotemplate

Cara Membuat Tombol Search Seperti Evotemplate :

1.Masuk ke Blogger > Template > Edit HTML
2. Copy code di bawah ini paste 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. Copy Code di bawah ini paste di Tata Letak > Tambah Gadget >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>

4. Simpan

Semoga bermanfaat bagi anda :)

Regards, Admin - Brian Adam

Share :

Tweet

✚

Related Post