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.

Merah: border: 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 :)