May 26, 2012

How to add code block into blogger posts

Leave a Comment

This post will guide 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:
TRACE-SOLUTION.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:100px;  
      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"> TRACE-SOLUTION.COM   
 </code></pre>  

Now switch to Compose to see your result

TRACE-SOLUTION.COM  
From now onwards, anytime you want to add a code block into your post, just use this trick.

0 comments :

Post a Comment