【Blogger】自訂 Code and Reference

常常在各家部落客分享的文章都有程式碼 (blockquote/code) 及相關文章 (reference) 的區塊，而且蠻美觀的，研究了一個下午終於在自家的 Note 使用不用再羨慕別人了。

Blockquote/Code

1. 開啟 Blogger的修改HTML (自訂 → 範本 → 修改HTML)。
2. 將 http://devajonny.googlepages.com/Code_BG.png 圖片貼到自家的 Google Pages。
3. 將以下程式碼貼到 </b:skin> 上方 → 儲存範本。

code {
 display: block; /* block (區塊)  */
 background: #1c1c1c url(http://devajonny.googlepages.com/Code_BG.png) left top repeat-y;
 border: 1px solid #999999; /* 框線粗細、樣式、顏色 */
 color: #91b9e0; /* 文字顏色 */
 font: $bodyfont;
 font-size: 13px; /* 字體大小 */
 padding: 10px 10px 10px 20px; /*上、右、下、左 */
 line-height: 1.6em;
 max-height: 1200px;
 letter-spacing: 0px;
 overflow: auto;
}

4. 使用方法：在 修改 HTML 模式底下使用 <code> 文字 </code> 包起來。
5. 特殊字元記得使用替代符號。

• < → &lt;
• > → &gt;
• & → &amp;

Reference

1. 同上，記得要先有 code 再加 code.ref 原因請參考 [CSS] A Cool blockquote for "Code style" and some blogging tips。
2. 將以下程式碼貼到 </b:skin> 上方 </code> 下方 → 儲存範本。

code.ref {
 display: block;
 background: #1c1c1c url(http://devajonny.googlepages.com/Code_REF.png) left top repeat-y;
 border: 1px solid #ff0000;
 color:#91b9e0;
 font: $bodyfont;
 font-size: 13px;
 padding: 10px 10px 10px 20px;
 line-height: 1.6em;
 margin: 5px 0 0 15px;
}

3. 使用方法：在 修改HTML 模式底下使用 <code class="ref"> 文字 </code> 包起來。

# 註: 紅字部分可自由更改，建議將圖片傳至自家空間會比較保險。

資料來源：
★[CSS] A Cool blockquote for "Code style" and some blogging tips
相關連結：
★iPlay99 - 我的線上玩樂誌 - Blogger改造 - 入門介紹及前置動作 - 持續更新
★iPlay99 - 我的線上玩樂誌 - Blogger Hack - 在文章中貼上程式碼code範例