對自己的版面很不爽之二 -- 那個 code 的字型很礙眼!

右圖那個 code 的長相...很礙眼, 字很醜, 很大坨, 一點都不美!

所以繼續爬文來把這個問題解決掉!

參照文章:

[blogger] 我也想要美美的code框
http://www.puyumaweb.com/2008/03/blogger-code.html

Blogger Hack - 在文章中貼上程式碼code範例
http://iplay99.blogspot.com/2007/12/blogger-hack_16.html

步驟:

1. 進入 Blogger 管理介面, 點選版面配置頁籤

2. 修改範本, 以 ctrl-f 搜尋字串, 找到 /* Posts. (* 因為這個修改與網頁文章有關, 按照預設給予的分類放, 往後即使隔了很長的時間, 也能知道大略的位置在哪)

3. 在適當的位置加入以下的 css 碼

code {
display: block;
font-family: 'Courier New';
font-size: 0.8em;
overflow: auto;
border: 1px solid #a5dcd9;
padding: 10px 10px 10px 21px;
line-height: 1.2em;
letter-spacing: 0px;
color: #666;
background: #e3f2f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh8yiEzxlqs-_9SNeLrYS-o6ALj9fTzOFm3ZON4j74XfumP_SSNvenFT29dxa5Z2ETkSAKMaynv3OHng2w25iAy9L5XGHRLr14phsPFhd8LiFa-kjLZQxgqOVgZfupdgL2RgW26n6f0agD/) left top repeat-y;
}

4. 儲存, 檢視網誌即可

注意事項:

* 在參照文章中寫到, 圖片可以放在 google pages, 由於 google pages 決定在年底後就停止服務, 所以必須另尋地點.
* 在每一個人的 Blogger 帳號裡都預設給了一個 1024mb 的免費的 Picasa 空間, 可以將圖片放在個人的 Picasa 空間中.
* 如果你要用我的, 我很樂意, 但請複製完整, 並請另文說明你的 code 的編碼設計哪裡抄來的, 謝謝!

說到這, 我可以順道做個預告, 之三的預告嗎?

我想把標籤雲的 code 加進來!

目前暫時只有我家老爺跟我提過我的標籤列很長, 長的很扯, 誰叫 Blogger 的標籤這麼好用, 可以把關鍵字全加進去, 寫論文不都說可以加三組關鍵字嗎? 我也是這樣子照做而已啊! 況且這樣子好找多了, 不是嗎?

希望這篇貼出來, 不會馬上有人跳出來說, 只有你自己覺得那一長串會好找, 況且我是用文章數排序, 而非關鍵字排序. :p

哈! 哈! 哈! 我大概會先笑夠了, 再回答, 反正這邊知道的人少, 每天上門的小羊兩三隻, 會看我的 blog 的不會只看那區, 沒人抱怨嘛~~~