替 blogger 加上額外的 css

範本 -> 自訂 -> Blogger 範本設計工具 -> 進階 -> 新增 css

pre.gray{
background: #cccccc;
color: #111111;
line-height:200%;
padding:20px;
border:1px solid #ffffff;
font-size: 9pt;
text-shadow: #fafafa 0px 1px 0px;
-webkit-box-shadow:inset #666 0px 2px 7px;
-moz-box-shadow:inset #666 0px 2px 7px;
-box-shadow:inset #666 0px 2px 7px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozkHm4f2gM4ge_2anKbJ7atfkbNsIcD0Z1egA0Rvh1uchMvR8MkfcQD1B_F93N4KJEcb-UFht6upmvzlHvPowsW_J2sY22zx1b0wGYAHDbxoTWFR0GbYbpORy_pGxzkeSylPZEvI_UHz7/s800/wide_rectangles.png);
}

pre.cmd{
border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 600px; text-align: left;
}

我目前定義了幾個 pre css, 然後就可以這樣用:

test.html

<pre class="cmd">cmd</pre>
<pre class="gray">pre</pre>

css 畫面:

cmd

pre

將 blogger 文章收折

http://angelo-nmb.blogspot.com/2006/10/for-blogger-beta.html
很佩服寫這文章以及使用的人, 我有網頁程式的經驗, 但還是花了 1 個多小時才搞定這功能。

到處 alert, 才找到問題, 也稍微了解 bloger 的一些 CSS 定義。

這個功能很好用, 我也很喜歡。

有個缺點, 在編寫文章使用非 html 模式, span 的 tag 有時候會亂掉, 相當麻煩。

20131001 補充:
blog 已經提供這功能: https://support.google.com/blogger/answer/154172
不過得在主畫面才有效過, 若是單篇文章就不會顯現。