Tuesday, 17 February 2015

Customize search box 2


This is a tutorial on how to customize search box mine version..Actually many people ask me in ask.fm for this tutorial...Sorry for the late update..

For template designer :
www.blogger.com --> layout --> add gadget --> HTML/Javascript

For blogskin :
www.blogger.com --> template

Preview

Copy the code below :

<br /><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:#FFFFE5; border-bottom-left-radius: 10px 10px;border-top-left-radius: 10px 10px;border: #FFEEEE solid 3px;color: #666666; font-size: 11px;font-family:century gothic; width:135px;padding:3px;padding-left:5px; " type="text" value="Enter some keyword" vinput="" /> <input id="searchButton" style="background:#FFF7F7;border-bottom-right-radius: 10px 10px;border-top-right-radius: 10px 10px; border: #FFEEEE solid 3px;color: #444444; font-size: 11px;font-family:century gothic;padding:2px;width:50px;" type="submit" value="Search" /></form>
</center><br />

For template designer : Paste the code in the HTML/Javascript box...
For blogskin : Paste the code everywhere you want it to appear in your sidebar code...

The Notes :
Blue text : Background and border color
Fuchsia text : Font color
Red text : Width of search box
Purple text : Text on search box and button

..........................................................
PREVIEW AND SAVE
Kalau tak faham tanyalah
..........................................................

7 comments:

  1. thank you so much!! i have to try it! >< interested tutorial ;)

    ReplyDelete
  2. thank you ^^ i applied it to my blog, and it looks great :) your blog is amazing ^^ thank you!

    ReplyDelete