Skip to main content

Tutorial Membuat Search Box Transparan

Tutorial Cara Membuat Search Box Transparan - Aloha!
Sorry request tutornya baru bisa saya posting hari ini :( 
Berikut cara membuat search box transparan.

Note! 
Biru: Untuk pengguna Template Designer /Template biasa 
Ungu: Untuk pengguna Classic Templates (Blogskin, dsb)
  • Login Blogger
  • Layout → Add a Gadget → HTML/JavaScript
  • Copy kode di bawah ini, kemudian Paste di box HTML/Javascript
  • Template → Edit Template HTML
  • Copy kode di bawah ini, kemudian Paste di box Edit Template HTML. Letaknya terserah kalian, yang pasti diantara <table> dan </table>
<div>
<center>
<form action="/search" id="searchThis" method="get" style="display: inline;">
<input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="background: url(URL BACKGROUND SEARCH BOX); border: #fa839b dashed 2px; color: #aaa; font-size: 12px; width: 190px;" align: center; type="text" value="SEARCH BOX" vinput="" /> <input id="searchButton" style="background: url(URL BACKGROUND BUTTON GO); border: #faafbe dashed 2px; color: #aaa; font-size: 12px; padding-top: 3px;" type="submit" value="GO" /></form>
</center>
</div>
Hijau: Ganti text sesuai keinginan kalian
Coklat: Masukkan url gambar/background yang ingin kalian jadikan background search box dan button nya. Jika kalian ingin search box kelihatan transparan, masukkan url background yang kalian gunakan pada blog kalian.
Merahborder: warna dan ketebalan garis/border pada search box (garis yang putus-putus itu loh)
              color: warna text search box
              font-size: ukuran text 
              width: lebar search box
  • Preview terlebih dahulu, kemudian Save 
Any question? Leave a comment ya :)

Comments

Post a Comment