how to get rid of xangathemes in exchange for createblog.com 's xanga themes Options

[secretly]

I can't seem to remove my current xanga theme for the ones in create blog.com
Here's the webpage http://www.createblog.com/layouts/code.php?id=63
which contains the HTML code I wanted to upload.

<p><a href="http://www.createblog.com/layouts/index.php?layout=xanga_layouts" title="Grab Xanga Layouts and Xanga Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Xanga Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><script language=javascript>
document.title=('------------------>>my thoughts, my diary, my xanga.')
</SCRIPT>

<STYLE type=text/css>BODY {
SCROLLBAR-FACE-COLOR: #FAFBF7;
SCROLLBAR-HIGHLIGHT-COLOR: #FAFBF7;
SCROLLBAR-SHADOW-COLOR: #FAFBF7;
SCROLLBAR-3DLIGHT-COLOR: #FAFBF7;
SCROLLBAR-ARROW-COLOR: #E0C9A9;
SCROLLBAR-TRACK-COLOR: #FAFBF7
SCROLLBAR-DARKSHADOW-COLOR: #FAFBF7
}
</STYLE>

<BR><BR>
<center>
<IMG SRC="http://mywebpages.comcast.net/bluebearies/book.jpg" WIDTH=752 HEIGHT=506 BORDER=0
ISMAP USEMAP="#book.jpg">

<MAP NAME="book.jpg">
<AREA SHAPE="RECT" COORDS="92,35,105,131"
HREF="http://www.xanga.com/USERNAME">
<AREA SHAPE="RECT" COORDS="95,146,113,244"
HREF="http://www.xanga.com/claf/default.asp">
<AREA SHAPE="RECT" COORDS="617,259,635,363"
HREF="http://www.xanga.com/guestbook.aspx?user=USERNAME">
<AREA SHAPE="RECT" COORDS="629,377,643,473"
HREF="http://www.xanga.com">
</MAP>

<div align=left>
<DIV style="margin-top: -426px; margin-left:
247px; width: 210px;OVERFLOW: auto;
height:374px; BACKGROUND-COLOR: transparent">


<STYLE type="text/css"> <!--
P {font-family:verdana; color: 000000;
font-size: 7pt}
B {font-family:verdana; color: 000000;
font-size:7pt}
I {font-family:verdana; color: 000000;
font-size:7pt}
TD {font-family:verdana; color: 000000;
font-size: 7pt;}
TH {font-family:verdana; color: 000000}
A:link{color:91B052;text-decoration:none;
text-transform: none; font-size:7pt;}
A:visited{color:91B052; text-decoration: none;
font-size:8pt;text-transform: uppercase;}
A:active{color:91B052;text-decoration:none;font-
size:8pt;}
a:hover{color:91B052; text-transform: uppercase;font-size:5pt;}-->
</style>

<STYLE type="text/css"><!--
BODY, P, TD {
font-family:verdana;
color: font-size:7pt;};
line-height:7px;
letter-spacing:0pt;
word-spacing: 10px;}
-->
</STYLE>

<style type=text/css>
.blogbody {font-size:7pt; width: 200px; line-
height:5px;}
.blogheader {font-family:verdana; color:
#000000; font-size: 6pt; text-transform:
uppercase; padding-bottom: 0px;
letter-spacing: 2px; text-align: right;}
.caption, .blogheader {
/* edits the dates */
background-image: url(none);
background-color: #transparent;
font: 6pt verdana;
text-transform: lowercase;
color: #000000;
border-bottom: 0px solid #000000;
text-align: left;
padding-bottom: 0px;
padding-left: 0px;
line-height: 100%;
width:190px}
#pnlEnabled table, .htmleditor { width:100%; }
.container { width:200px;}
.mainleft { display:none; }
input, option, select{
font-family: trebuchet MS; font-size:6pt;
color:#000000; background:#transparent;
border-top: solid 1px #000000;
border-bottom: solid 1px #000000;
border-right: solid 1px #000000;
border-left: solid 1px #000000;}
</style>
<STYLE>
/*
top bar remover - xanga.com/add_ons
*/
.leftmoduletitlebar, .leftmoduleborder,
.leftmoduleinterior, table.navigation,
table.footer {display: none;};</STYLE>

<style type="text/css">
BODY{cursor: crosshair;}
a {cursor: crosshair;}
</STYLE>

I can't convert it into CSS code,
so I copy+paste the HTML code into HeaderHTML, but still it doesn't work.