help with codes please - im a n00b!

Date: 11/13/13 (WebDesign) Keywords: no keywords

--> click <--

explanation as follows:

So I'm trying to figure out how to make my own Tumblr themes. I'm deconstructing this theme and trying to adapt it to tumblr. You can see my failed progress here. I can't see to get the blocks and variables working though. I'm using these two resources here and here but idk, it's confusing. The date won't show up & the div class for the title won't work either, it's much larger and wider than it is supposed to be. Help!

My Code is here:
<shtml><head> <title>in those brand new shoes</title> <meta name="description" content="{MetaDescription}" /> <style type="text/css"> body{ background-color: #EEEEEE; } ::-moz-selection{ color: #FFFFFF; background: #1A1919; } a:link, a:visited, a:active{ color: #CCCCCC; text-transform: uppercase; font-weight: bold; text-decoration: none; } a:hover{ color: #424242; text-decoration: line-through; } .header { padding: 10px; width: 689px; background-color: #1A1919; -moz-border-radius: 15px 15px 0px 0px; margin-bottom: 4px; } .content { font-family: arial; font-size: 11px; line-height: 11px; color: #555555; text-align:left; background: #FFFFFF; padding: 5px; margin-bottom: 5px; } .content:hover { -moz-border-radius: 15px!important; } .title { font-family: arial; font-size: 10px; line-height: 9px; letter-spacing: 1px; color: #FFFFFF; background-color: #1A1919; padding: 2px; text-transform: uppercase; margin-bottom: 5px; } .date { text-transform: lowercase; text-align: right; } big { font-family: arial; font-size: 23px; line-height: 90%; letter-spacing: -3px; text-transform: uppercase; font-weight: normal; } b, strong { color: #4DD4CE; } i, em { font-family: georgia; color: #FE3365; } u { color: #4DD4CE; border-bottom: 1px solid #CCCCCC; } s, strike { color: #FE3365; } small, sub, sup { font-family: small fonts; font-size: 7px; line-height: 7px; letter-spacing: 3px; text-transform: uppercase; } blockquote { background: #EEEEEE; border-left: 6px solid #4DD4CE; padding: 3px; padding-left: 8px; -moz-border-radius: 0px 10px 0px 10px; } blockquote:hover { background: #F6F6F6; border-right: 6px solid #FE3365; border-left: 0px solid #4DD4CE; padding: 3px; padding-right: 8px; padding-left: 8px; -moz-border-radius: 10px 0px 10px 0px; } img { border: none; } li{ font-size:11px; list-style:circle; margin-left:-25px; } .blogger-labels { font-size: 8px; line-height: 8px; padding: 2px; letter-spacing: 0px; text-transform: uppercase; background-color: #EEEEEE; } #navbar-iframe{ display: none; } </style> </head> <somebody> <script type="text/javascript">function changeNavigation(id){document.getElementById('main').innerHTML=document.getElementById(id).innerHTML}</script> <div align="center"> <br> <table cellspacing="0" cellpadding="0" width=715"> <tr> <div class="header"> <font style="font-size: 20px; cursor: pointer; color: #FE3365; word-spacing: 5px; line-height: 80%; font-family: courier new; letter-spacing: -3px; text-transform: uppercase;"> <span style="text-decoration: blur" onClick="document.getElementById('main').innerHTML=document.getElementById('profile').innerHTML" onMouseOut="this.style.textDecoration='none'; this.style.color='#FE3365'" onMouseOver="this.style.textDecoration='none';this.style.color='#84D9D2'">profile</span> <span style="text-decoration: blur" onClick="document.getElementById('main').innerHTML=document.getElementById('tagboard').innerHTML" onMouseOut="this.style.textDecoration='none'; this.style.color='#FE3365'"onMouseOver="this.style.textDecoration='none';this.style.color='#84D9D2'">tagboard</span> <span style="text-decoration: blur" onClick="document.getElementById('main').innerHTML=document.getElementById('affiliates').innerHTML" onMouseOut="this.style.textDecoration='none'; this.style.color='#FE3365'"onMouseOver="this.style.textDecoration='none';this.style.color='#84D9D2'">affiliates</span> </font> </div> <td width="500" valign="top" style="padding:2px;"> <div class="content"> <div class="date"> {block:Date}{TimeAgo}{block:Date} </div> {block:Posts} {block:Text} <div class="title"> {block:Title} <h2><a href="{Permalink}">{Title}</a></h2> {/block:Title} </div> <div class="content"> {Body} </div> {/block:Text} {/block:Posts} </div></div> </td> <td width="215" valign="top" style="padding:2px;"> <div class="content"> <div class="title">music box.</div> music player here.<br> no wider than <b>215px</b>. </div> <div id="main"> <div class="content"> <div class="title">hellohello~</div> sup. welcome to my blog.<br> tag before you leave, yeah? :D </div></div> <div id="profile" style="display: none;"> <div class="content"> <div class="title">profile.</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper aliquet venenatis. Aliquam erat volutpat. Nam et suscipit velit. Vestibulum placerat, felis quis dictum interdum, neque est pulvinar neque, at eleifend purus mauris at sapien. <br><br> about yourself here. :)<br> Normal | <b>Bold</b> | <strike>Strikeout</strike> | <i>Italic</i> | <u>Underline</u> | <a href="#">Link</a> | <big>big</big> | <small>small</small> </div> <div class="content"> <div class="title">twitter.</div> <div id="twitter_div"> <h2 class="sidebar-title" style="display:none;">updates.</h2> <ul id="twitter_update_list"></ul> <a href="/go.php?http://twitter.com/uneasystare" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a> </div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/uneasystare.json?callback=twitterCallback2&count=5"></script> ^ this is my twitter. change the username to yours~ :D </div> <div id="tagboard" style="display: none;"> <div class="content"> <div class="title">tagboard.</div> tagboard here.<br> no wider than <b>215px</b>. </div></div> <div id="affiliates" style="display: none;"> <div class="content"> <div class="title">daily reads.</div> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a><br> ► <a href="/go.php?http://colordripped.blogspot.com/" target="_blank">friend</a> </div> <div class="content"> <div class="title">credits.</div> Layout created by <a href="/go.php?http://blogskins.com/me/sagacity" target="blank">saga</a><a href="/go.php?http://colordripped.blogspot.com/" target="blank">city</a>. Inspired by <a href="/go.php?http://tumblr.com/" target="blank">tumblr</a> (original theme link was deleted). Colors used are from <a href="/go.php?http://www.blogskins.com/me/eclair-x" target="blank">eclair</a><a href="/go.php?http://www.blogskins.com/info/176933" target="blank">-x</a>. Please use <b>MOZILLA FIREFOX</b> when viewing this layout/blog. Use a 1280<b><i>x</i></b><i></i>800px screen for best results. </div></div></div> <div class="content"> <div class="title">archives.</div> <div style="overflow: auto; height: 125px; width: 100%;"> <BloggerArchives>► <a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a><br> </BloggerArchives> </div></div> </td></tr></table> </div> </somebody></shtml>

Thankyou so much, any help is greatly appreciated!

Source: http://webdesign.livejournal.com/1588282.html

« How to create 100% verified...

Frameworks and Web Design... »