Cara Membuat Search Box di Template Subculture Fix

Karena alasan buat sobat yang memakai template subculture fix mungkin masih minim fitur nya..
Saya akan kasih pernak pernik nya, kali saya akan ngasih cara bikin Search box :

Search Box


Caranya:

1. Login ke blog dan buka menu edit html
2. Copy kode ini, dan simpan diatas </header>
<div id='search-box'><form action='/search' id='cse-search-box' method='get'><input id='search-text' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari artikel di blog ini'/><button id='search-button' type='submit'/></form></div>

3. Simpan CSS ini diatas </style>
#search-box{position:relative;width:250px;float:right;margin-top:-2px;margin-right:35px}
#cse-search-box{height:28px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #dfdfdf;border-radius:4px}
#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:90%;padding:5px 20px 12px 10px;color:#666;outline:none}
#search-button{position:absolute;top:-2px;right:4px;height:32px;width:20px;margin-top:25px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zfS9E9WxMd7Ro_UBNFi0iLll-Am0ygvmZBAuVXcXjzgWwolY63BJ1c869jBQH_CpE1E256_-ZoIAYFESuIsLckGNg9j0TmbPov3qBYUku8Em0xCEJknOfOU0XWsqiJc7AexWiDVIJLc/s1600/search-icon.jpg) no-repeat;cursor:pointer}

4. Simpan Template, dan lihat hasilnya ;)

Semoga bermanfaat ^_^



0 comments