How to add code block into blogger posts

How to add code block into blogger posts.
This post will giude you the way to add a code block into your post MANUALLY. You may find a lot of tutorials that have widgets already built and pack to do this. I really think you should write code to do it at least to know the way it works.
Assume that you got a text need to be added to code block:

abcdthisisMICROTRIX.BLOGSPOT.COM



Now, open your blog, take a new post, go to Edit HTML tag. Finally add this code to your HTML editor:

 <style type="text/css">  
 pre.CICodeFormatter{  
      font-family:arial;  
      font-size:12px;  
      border:1px dashed #CCCCCC;  
      width:99%;  
      height:300px;  
      overflow:auto;  
      background:#f0f0f0;  
      line-height:20px;  
      padding:0px;  
      color:#000000;  
      text-align:left;  
 }  
 pre.CICodeFormatter code{  
      color:#000000;  
      word-wrap:normal;  
 }  
 </style>  
 <pre class="CICodeFormatter" ><code class="CICodeFormatter"> abcdthisisMICROTRIX.BLOGSPOT.COM   
 </code></pre>  

Now switch to Compose to see your result.

 abcdthisisMICROTRIX.BLOGSPOT.COM  

From now on, anytime you want to add a code block into your post, just use this trick. It is done manually but it will help you improve your skill in Javascript and HTML. Good luck!