Blogger的美化─加入程式窗

常常看到網友的網誌文章中利用一個類似底下的小視窗貼進一長串的程式碼，非常方便，也不致於讓文章看起來落落長，我們來看看是怎麼作到的。

1. 進入到後台「範本」 。
2. 備份原有的模版。
3. 點選「修改HTML」。
4. 勾選「展開小裝置範本」。
5. 利用 Ctrl+F 找到 </b:skin> 所在。
6. 將下方所列出的程式碼貼在 </b:skin> 的上方。
   
   CODE {
display: block;
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:150px;
line-height: 1.2em;
}

   
1. font-size: 字體的大小。
2. overflow:auto: 字串長度超過頁面高度時，自動有滑桿出現。
3.  max-height: 程式窗的最大高度。
4. 圖片可以另外下載到到自己的網頁的圖庫中，例如PicasaWeb相簿中存放，然後再將網址改變。


7. 點選「儲存範本」後，就完成設定了。
8. 之後在編輯文章的時候只要文章的 HTML 編輯視窗中，參考下圖的方式於 <code>及 </code> 之間貼入程式碼就可以了。必要時以<br />將文字斷行，保持原本的排列方式。
   
   
   
   
   
9. 在貼程式碼進程式窗時，因為 < 、 > 、& 這三個符號會被網頁誤認為是需要執行的程式而出現錯誤，所以我們必須要將貼的程式碼文字先作處理。
   
   
   1. 先連結到這個網站。HTML Decoder
   2. 然後將程式碼貼下圖上方的位置，
   3. 按一下 Encode 產生下圖下方的程式碼文字。
   4. 將程式碼文字貼進文章 HTML 編輯視窗中 <code>及 </code> 之間就可以了。
      
      
      
   
   「Blogger的美化」系列筆記
   
   
   • 簡單修改
   • 網頁的CSS架構
   • 模版的介紹與修改
   • 小工具的調整  
   • 文章加入「讚」及推文功能
   • 加入「相關文章」
   • 增加臉書留言版
   • 以圖示更換連結文字 
   • 加入程式窗

參考資料：凍仁的Ubuntu筆記、iPlay99玩樂誌、高登工作室