在Blogger加入Code語法區塊及資料來源參考出處區塊

資料來源：
Kaie's Blog -> [CSS] A Cool blockquote for "Code style" and some blogging tips

如何在Blogger中加入如HTML或Javascript的語法呢?

##用部落格張貼各種語法來進行教學是很常見的事，通常是在網頁編輯軟體中或是如http://www.manoli.net/csharpformat/ 、http://phpfi.com/ 或 Online syntax highlighting（ http://tohtml.com/ 試用過覺得這個比前者精準好用）線上語法產生器把語法貼在部落格上，如果要像本文的例子，要在左側標示為code的語法區塊中將原來的HTML或Javascript語法呈現出來，要怎麼做呢?
1.從[版面配置]>>[修改HTML]，勾選[展開小裝置範本]。
2.請養成好習慣，對於版面配置的HTML加以修改前，都要先[下載完整模版]。
3.接著在版面配置的CSS樣式表（通常在 </head>之前）加入以下語法。（順便一提，CSS中要加入註解的方式是 /* 註解內容 */ 而不是HTML中的 <!-- 註解內容 --> ）

/* CSS for Code Block in content */
code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #0000FF url(http://chenkaie.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

4.可自行修改字體、字體大小、語法區背景等等，url旁邊網址的Code_BG.gif圖檔，是每次只要使用語法區塊時就會顯示在區塊左邊的Code圖案，建議另存新檔以免佔用原圖檔提供者的頻寬而導致該圖案無法出現。確認複製與修改完畢後，按[儲存範本]即可。
5.日後要在部落格裡張貼HTML或Javascript等語法教學時，只要在[修改HTML]模式下將要張貼的語法崁在<code></code>之中，張貼後讀者就可以看到完整的語法內容。
[註]有些特殊符號不能直接張貼，如左括弧<要輸入 &lt;才能呈現，因此最好先透過Online syntax highlighting校對一下，才能正確在部落格中呈現語法讓讀者複製運用。

如何在Blogger中加入如資料來源的區塊語法呢?

##如果引用他站資料時，想在如本文上方呈現之紅底白字REFERRENCE資料來源區塊，首先也是加入以下的CSS語法之後，再以<code class="ref">引用的參考資料出處內容</code>的方法即可。

/* CSS for Referrence Block in content */
code.ref{
display: block; /* fixes a strange ie margin bug */
background: #FF6600 url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 0 0 15px;
font-size: 13px;
font: Courier New;
line-height: 1.6em;
}


繼續閱讀...

小故事大啟示

○幽默
一位夫人打電話給建築師，說每當火車經過時，她的睡床就會搖動。
“這簡直是無稽之談！”建築師回答說，“我來看看。”
建築師到達後，夫人建議他躺在床上，體會一下火車經過時的感覺。
建築師剛上床躺下，夫人的丈夫就回來了。

他見此情形，便厲聲喝問：“你躺在我妻子的床上幹什麼？”
建築師戰戰兢兢地回答：“我說是在等火車，你會相信嗎？”

【深思小語】

有些話是真的，卻聽上去很假；有些話是假的，卻令人無庸置疑。

○引誘
英國紳士與法國女人同乘一個包廂，女人想引誘這個英國人，

她脫衣躺下後就抱怨身上發冷。先生把自己的被子給了她，她還是不停地說冷。
“我還能怎麼幫助你呢？”先生沮喪地問道。
“我小時候媽媽總是用自己的身體給我取暖。”
“小姐，這我就愛莫能助了。我總不能跳下火車去找你的媽媽吧？”
【深思小語】
善解風情的男人是好男人，不解風情的男人更是好男人。

○調羹
麥克走進餐館，點了一份湯，服務員馬上給他端了上來。
服務員剛走開，麥克就嚷嚷起來：“對不起，這湯我沒法喝。”
服務員重新給他上了一個湯，他還是說：“對不起，這湯我沒法喝。”
服務員只好叫來經理。
經理畢恭畢敬地朝麥克點點頭

說：“先生，這道菜是本店最拿手的，深受顧客歡迎，難道您……”

“我是說，調羹在哪里呢？”
【深思小語】
有錯就改，當然是件好事。但我們常常卻改掉正確的，留下錯誤的，結果是錯上加錯。

○穿錯
飯廳內，一個異常謙恭的人膽怯地碰了碰另一個顧客，那人正在穿一件大衣。
“對不起，請問您是不是彼得先生？”
“不，我不是。”那人回答。
“啊，”他舒了一口氣，“那我沒弄錯，我就是他，您穿了他的大衣。”
【深思小語】
要做到理直氣壯，並不是件容易的事情。

理直的人，往往低聲下氣；而理歪的人，卻是氣壯如牛。

○回電
一個蘇格蘭人去倫敦，想順便探望一位老朋友，但卻忘了他的住址，

於是給家父發了一份電報：“您知道比爾的住址嗎？速告！”
當天，他就收到一份加急回電：“知道。”
【深思小語】
當我們終於找到最正確的答案時，卻發現它是最無用的。

○傷心故事
有三個人到紐約度假。他們在一座高層賓館的第45層訂了一個套房。
一天晚上，大樓電梯出現故障，服務員安排他們在大廳過夜。
他們商量後，決定徒步走回房間，並約定輪流說笑話、唱歌和講故事，

以減輕登樓的勞累。
笑話講了，歌也唱了，好不容易爬到第34層，大家都感覺精疲力竭。
“好吧，傑克，你來講個幽默故事吧。”
傑克說：“故事不長，卻令人傷心至極：我把房間的鑰匙忘在大廳了。”
【深思小語】
我們痛苦，所以幽默；我們幽默，所以快樂。

○賣書
一個很有名的作家要來書店參觀。書店老闆受寵若驚，

連忙把所有的書撤下，全部換上作家的書。
作家來到書店後，心裏非常高興，問道：“貴店只售本人的書嗎？”
“當然不是。”書店老闆回答，“別的書銷路很好，都賣完了。”
【深思小語】
“拍馬屁”是個奇怪的詞：你像是在奉承他，又像是在侮辱他。

○幫忙
在郵局大廳內，一位老太太走到一個中年人跟前，

客氣地說：“先生，請幫我在明信片上寫上地址好嗎？”
“當然可以。”中年人按老人的要求做了。
“謝謝！”老太太又說：“再幫我寫上一小段話，好嗎？”
“好吧。”中年人照老太太的話寫好後，微笑著問道：“還有什麼要幫忙的嗎？”
“嗯，還有一件小事。”老太太看著明信片說

“幫我在下面再加一句：字跡潦草，敬請原諒。”
【深思小語】
你若不肯幫忙，人家會恨你一個星期；如果幫得不夠完美，就會恨你一輩子

繼續閱讀...