Blogger Code Block

本篇文章為轉貼文章，有著作權之保護，如要轉貼，請經過原始創作人之同意。

以下提供兩種Code Block樣式

這是第一種Code Block
將語法貼在posts 下方

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

把想要block程式碼放到<code></code>之中
以下為第二種Code Block，感謝hnigel教學。
首先必須先修改Blogger的樣式表
在樣式表中加入下面這個屬性
顏色可以照個人喜好更改

#code {
BORDER-RIGHT: rgb(51,153,0) 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: rgb(51,153,0) 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px; 
BORDER-LEFT: rgb(51,153,0) 1px solid;
COLOR: rgb(0,102,0);
PADDING-TOP: 10px; 
BORDER-BOTTOM: rgb(51,153,0) 1px solid;
}

之後在文章中的用法

<div id="code">
要加上外框的文章
</div>

它的原理其實就是CSS當中外框的設定
如果需要基本的教學
可以去GOOGLE收尋關鍵字"CSS 外框"或"CSS BORDER"即可
在此就不多作介紹


文章來源：http://warrickdodo.blogspot.com/2007/02/code-display-block-fixes-strange-ie.html