「Hack」Blogger 插入程式區塊或是引文區塊

網路上部落客時常會有引用文章或是貼上程式碼，使用特殊區快來顯示，在這之下，將程式碼區塊改為引文區塊的方式，當然方法有很多種，僅供參考。




<style>
.post .fontblock {
display: block; /* fixes a strange ie margin bug */
font-family: 微軟正黑體;
font-size: 12pt;
overflow:auto;
background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHh9kNFMHk6HaBAS6sbz26hFlz71AA1yWQeAmfZxDF5RccjleRdsdwiJxacIZ7HoTC91Y470aJ4Yc_QQOq_uc_GXjddDwi4cCIn3MKVX3QilO3zT3VYzXE_QhL0yJW6xlX9GBkGJDnR3w/w7-h820-no/sbar.png) left top repeat-y;
border: 2px dotted #ccc;
padding: 10px 10px 10px 20px;
max-height:1000px;
line-height: 1.4em;
margin-left: 30px;
margin-right: 30px;
}
</style>

呼叫方式須先切換HTML，將語法貼上後，即可編輯文字。或是事後在編輯HTML。
<div class="fontblock">Blogger插入程式區塊或是引文區塊</div>


程式區塊
<style>
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:1000px;
line-height: 1.2em;
}
</style>

用以下程式碼為為例，
版面配置將標頭區塊和內容出處變成為可以移動，但不刪除。


內容出處
<b:widget id="Attribution1" locked="true" title="" type="Attribution"></b:widget>
<b:widget id="Attribution1" locked="false" title="" type="Attribution"></b:widget>

標頭區塊(HEADER)
<b:widget id='Header1' locked='true' title='零點壹咖啡 (Header)' type='Header'>
<b:widget id='Header1' locked='false' title='零點壹咖啡 (Header)' type='Header'>

在網頁中嵌入顯示程式碼：CSS Block
w3school
CSS 語法教學