customise search bars!


Hello...
Today I will be starting a sort-of blog series that many people do... Blog tips. I will be sharing some that I haven't really seen much, or I have figured out myself.
The first is how to make a pretty search bar for your blog. The lovely Alyssa originally told me about this post, but I there were a few things I wanted to edit to make it unique for my blog!
This is how you make a pretty and unique search bar for your blog:


1 //  Go to Layout > Add Gadget > Html/JavaScript and copy this into the 'content' box:

.......................................................................................................................................................

<div class="searchtitle">
   <div class="scatter_box_fixed-background">
    <div class="scatter_box_fixed-border1">
        <div class="scatter_box_fixed-border2">
            <div class="scatter_box_fixed-content">
<form id="searchform" method="get" action="/search">
<input type="text" class="searchinput" value="enter keywords here" onfocus="if (this.value == 'enter keywords here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter keywords here';}" size="20" maxlength="100" name="q" id="s" /> </form>
                  </div>
            </div>
      </div>
   </div>
</div>

.......................................................................................................................................................
2 // Click save. Now go to Layout > Template Designer > Advanced > Add CSS and copy in this code:

.searchtitle{
margin-left:7px;
margin-bottom:20px;
}
.scatter_box_fixed-background {
background:#C6E5D9;
height:35px;
width:160px;
text-align:center;
}
.scatter_box_fixed-border1 {
border-left:1px dashed #434034;
border-top:1px dashed #434034;
height:35px;
left:1px;
position:relative;
top:-3px;
width:158px;
}
.scatter_box_fixed-border2 {
border-bottom:1px dashed #434034;
border-right:1px dashed #434034;
height:35px;
left:3px;
position:relative;
top:-1px;
width:158px;
}
.scatter_box_fixed-content {
display:block;
left:0;
line-height:1.4;
padding:2px 0 0 5px;
position:relative;
text-align:left;
top:5px;
}
.searchinput {
background-colortransparent;
border:none;
padding0;
margin:0;
outlinenone;
}



3 // Now, to change the width for your side bar, find this code that says '160px'


And change it to whatever width you need.


4 // Now scroll down, and find the code that says '158px' and change it to the same as before, minus 2 pixels.


5 // Do the same again, lower down.


6 // If you want to change the color, go to this website and select a color, like this:

7 // The colour will come up below, with the code. Copy the code of the colour you want, and paste it where you see this code in the CSS box.


8 // Save the changes. To change the wording in the box, go back to your Html gadget and change the code that says 'enter keywords here' to whatever you want.

9 // Click save and you are done!
Please give this a go! It i fun and pretty and completely customizable.
Have a great day!
chloe x