Including HTML Tags/codes in Blog Post

This post is the outcome of my previous post. In my previous post,I had to include some HTML codes as an example, it contained Scripts, CSS and some Body code. I did that in a normal way, but Blogger Engine took that as HTML codes and dsiplayed the corresponding result as a browser does. I was thinking what to do for this, I tried commenting that part of the code, but it didnt work well.Finally we got a solution, instead of "<" open tag we shoudl use "amplt;" and instead of close tag ">" we should use "ampgt;". This works out well.
NOTE: Instead of "amp" use the "&" symbol, i have given " amp "here for reperesentation.

Applying Styles for File Button

Everyone who works in the front end will be aware of the input type=”file” , the function of this button is that, it will fetch you the file browser, so that you can chose the file for your Upload. Unfortunately, you can have images for these buttons, unlike we have for other Submit kind of buttons. So what can be done for this? There are two solutions,

1.You can find out the code behind of this File button and can implement that procedure in Onclick of this image button.
2.You can have an image Button over a File Button and you can invoke the Click event of the File button from the onclick event of this image buttton. For this you have to play with the z-index property.

we will have a look at the second method, as the first one is very simple.

How to do this?
Change the z-index of the File Button, make it as negative(or a lesser value than image button). I have included the code here, check it out here

<script type=”text/javascript”>
function clickBrowse()
{
document.getElementById(’openssme’).click()
}
</script<
<style type=”text/css”<
input.hide
{

position:relative;
left:-225px;
z-index: -1;
width:0px;
border-width:0px;
}

input.red
{
position:relative;
background-color:#cc0000;
font-weight:bold;
color:#ffffff;
z-index:100;
width:75px;
height:20px;
font-size:10px;
}
</style>

<!–[if IE]>
<style type=”text/css”>
input.hide
{
position:relative;
visibility:hidden;
left:-83px;
z-index: -1;
width:0px;
border-width:0px;
}
</style>
<![endif]–>

<img src=”btn_browse.gif” class=”red” id=”pseudobutton” onClick=”clickBrowse();” />
<input type=”file” class=”hide” id=”openssme”>

We have to handle IE and FF seperately, so a code for IE is placed seperately in this.
I thank Nirmal, for helping me out in this.