BlockQuote區塊

• 加入縮排CSS樣式加入Blogger範本


blockquote {
margin: 15px 30px 0 20px;
padding: 10px;
border: 2px dashed #cde;
display:block;
overflow:auto;
}
blockquote blockquote{
margin: 10px;
padding: 0px;
padding-left: 5px;
border: 1px dashed #ccc;
border-left: 5px groove #2222ff;
display:block;
overflow:auto;
max-height:300px;
}
blockquote p {
margin-top: 0;
}


範例：

縮排…

http://chenkaie.blogspot.com/2006/11/css-cool-blockquote-for-code-style.html

Blogger加入Code Block樣式(CSS)

1. 修改Blogger的網頁範本HTML，並在程式碼中加入下列描述

code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: url(http://bloggerhacks.googlecode.com/files/Code_BG.png) left top no-repeat;
border: 1px dotted #777;
padding: 10px 5px 10px 20px;
max-height:170px;
line-height: 1.3em;
margin: 10px 40px 10px 30px;
}
code.ref {
display: block; /* fixes a strange ie margin bug */
overflow:hidden;
background: url(http://bloggerhacks.googlecode.com/files/Code_REF.png) left top no-repeat;
border: 1px dotted #a88;
font-size: 13px;
font: normal normal 100% 'Lucida Grande',Georgia,'Trebuchet MS';
line-height: 1.6em;
}


如下圖：




2. 在文章中加入code block



<code>
...
</code>


3. 
   加入Reference Code
   


<code class="ref">
...
</code>



http://chenkaie.blogspot.com/2006/11/css-cool-blockquote-for-code-style.html