It is easy to add a text area/ code box into your blogger site. You just have to use syntax highlighter and place the scripts and CSS in your dropbox account and then add them into the templates header. With that being said here are the steps in detail.

  1. Download syntax highlighter : Syntax Highlighter
  2. Extract the zip and place the folders/ files into the dropbox public folder.
  3. Go to your blogger account, then edit the templates html to add references to the brush and styles you would like to use. For example if you would like to use the Java code add reference to shBrushJava.js and if you would like to use themes add the appropriate reference to the stylesheet.
  4. The code snippet below shows how to add the scripts in the templates <head> section 
    <link href='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/styles/shCoreDjango.css' rel='stylesheet' type='text/css'/> 
<link href='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shCore.js' type='text/javascript'/> 
    <script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushCpp.js' type='text/javascript'/> 
    <script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='https://dl.dropboxusercontent.com/u/<yourusername-goes-here>/scripts/shBrushPlain.js' type='text/javascript'/> 

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
  5. After you have added the above scripts. To add for example, java code just place the escaped html code between the following elements.  <pre class="brush:java;"> //your code goes here </pre> . You can just change the brush type to xml for xml code, text for text box and so on. But, make sure that any xml/html code that you are placing is escaped, for this you can use any of the dozen utilities available online.
Note: I recommend using windows live writer, as it includes various plugins, including syntaxhighlighter and you don't even have to manually escape the code, It does it for you automatically. Also, it has various other advantages such as ability to write the posts offline with images and videos that are automatically uploaded when you post the item.