Blogger Hack - 在文章中貼上程式碼code範例
本來很簡單的事情被我搞得很複雜
為程式碼code加上一個漂亮的外框
這個功能算是自己想要寫相關 blogger 改造經歷時，所知道的一些 hack程式碼或CSS 的文章記錄時，必要的一項先決條件，所以先處理。
這個功能算是自己想要寫相關 blogger 改造經歷時，所知道的一些 hack程式碼或CSS 的文章記錄時，必要的一項美化先決條件，所以先處理。
首先呢，你是否對你的樣版基本構造有初步瞭解？沒有的話，先眯一下底下文章，我把我自己一開始遇到的一些疑問及解答寫在裡面：
簡單的說明一下步驟：
1、把底下這段程式碼複製貼上到 </HEAD>的上方 </b:skin>的上面
註：藍色部份，你可以去開通自己的Google Pages，再把那張code_BG.gif圖檔上傳到自己的Google Pages空間裡，比較無後顧之憂。
code {
display: block;
font-family: 'Courier New';
font-size: 9pt;
overflow: auto;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height: 1200px;
line-height: 1.2em;
letter-spacing: 0px;
color: #000;
background: #ccc url(http://sandnfish.googlepages.com/Code_BG.gif) left top repeat-y;
}
2、接下來，只要在HTML編輯模式下，在範例程式碼的前後，用<code>及</code>包起來即可，就像底下這樣。
<code>body#layout #main-wrapper {<br>margin-left: 0px;<br>margin-right: 0px;<br>width: 400px;<br>}</code>
3、你再切換到「所見即所得」的編輯模式下（英文：What You See Is What You Get，縮寫：WYSIWYG），就會看到底下的結果：
body#layout #main-wrapper {
margin-left: 0px;
margin-right: 0px;
width: 400px;
}
備註：這裡需要注意的一點是，因為iPlay99在撰寫部落格文章都改用 wlw(windows live writer)編輯，沒有遇到這種問題，因此，當初在閱讀到別人的教學加註了底下這段，我一時之間不知道到底它是要在哪裡處理這件「更換」動作(以為它是必須的)。
- < 用 < 更換
- > 用 >更換
- & 用 &更換
如果你是使用Blogger本身的文章編輯介面，在處理程式碼的動作上，可能會出現問題，當你在WYSIWYG所見即所得的模式下要引用程式碼時，寫完了結果切換到預覽模式或是HTML編輯模式下，都會發現字被吃掉了。
這時你就要用上述的字元替換做法了
以上！如有疑問請留言。
Technorati 的標籤：blogger WYSIWYG,blogger code,css,windows live writer
你好
我從看PTT的文章之後
間接瀏覽到這篇部落格文章
於是開始學習
發現在步驟1我的作法是必須放在
這之前
</b:skin>
</head>
也就是多了這部份</b:skin>
不然會在部落格上方出現code
附註我是使用羊男Gadget 1.1
我想可能是我還是超新手
不過謝謝你的blogger hack
繼續拜讀去
[回應]
你好
不才又發現一個新的問題
http://sandnfish.googlepages.com/Code_BG.gif
有關這張圖
我抓下來的圖檔是白底
部落格除了白底外 左邊哪行黑色以及code都不見了 只有一個白框框
不知道這是什麼問題
謝謝
[回應]
呃.......回應又正常了~見鬼...
(這篇回應重打三次了.......氣死我...)
＝＿＝原來是卡在 tag....
...
......
..
咳，咳~嗯~威廉~
關於你的問題啊~
一、多謝指正，我已將補充參考資料放在文章前頭，你可以參考一下，我本來是不想在自己的每篇文章都幫自己的舊文打廣告的，覺得有點怪怪的…不過聽你一講，其實你跟我一開始的處境還真像，我想我會在往後自己有關 blogger 修改經驗分享的文章裡附上入門文章 XD，應該真的會有些幫助。(很高興幫得上忙)
btw，其實這篇文章與「Blogger改造 - 入門介紹+前置動作(更新中) by sandnfish」，是同時撰寫的，因為當時的我對 blogger 也不熟，但是又想把自己修改的過程記錄下來分享，所以老實講，你說把 code 放在 ＜head＞前，或＜／head＞前 ＜／b:skin＞後，code 出現在網頁最上頭，這種事我都做過 XD
....
咳~嗯~總之多謝指正~
至於問題二啊，呃...我用 IE與FF開都正常啊，就是一張靠左邊，直條狀的灰色gif圖檔啊，看能不能截張圖來看一下，比較好理解你的問題。
[回應]
新年快樂^^
聽到你的回答，沒想到你竟然聽的懂我在問什麼問題，一直在想看我問題的本身就是一個問題。不過我不是指正啦，我是請教>"< 。
我是從Blogger - 快速編輯Quickedit與郵件轉寄EmailPost消失了？ --->「Blogger改造 - 入門介紹+前置動作(更新中) by sandnfish」----> Blogger Hack - 在文章中貼上程式碼code範例，順序大概是這樣。
另外問題二，就是這樣的情形，只有白框。
http://iamwilliam-tw.blogspot.com/2007/12/blogger-hack-code.html
。
我在猜是不是Google Pages，上傳的方式不同，我是直接利用右方的upload直接上傳。如果這樣，那我可以直接傳到blogger上面，再引用嗎？
[回應]
哈囉~我看了一下，呃，你的 code css 的 background屬性應該有錯誤，呃...你的gif 圖跟你的googlepages 都是 404 喔~
你把你自己的 http://iamwilliamtw.googlepages.com/Code_BG.gif還有 http://iamwilliamtw.googlepages.com/網址貼上看看~都會出現 404查無此物的訊息，嗯~你 googlepages 是？
因為我拿我測試站來試文章裡的 css 是有效的，所以你的問題只是單純卡在 圖片網址失效
[回應]
hi,again
我想會出現404，是因為我把我的googlepages設定成不公開，我之前就有試過公開不公開都是一樣的白底不過有左邊的黑code。
http://sandnfish.googlepages.com/Code_BG.gif 。我看你的圖是白底有左邊黑code，不管是用火狐或IE都是一樣的，我想就是因為這樣，所以上傳的時候，才會變成什麼全部都白底。不知道原始的圖檔還有哪裡有？
謝謝。
[回應]
呃...首先
1.code_bg.gif 這張圖本身是一張長條狀的黑底圖，並不包含白底，白底是瀏覽器的空白頁面顏色，並不是圖片。
2.=_= ......應該是這樣，因為你底下這句語法
background: #ccc url (網址)＜---問題點
url(圖片網址) ＜---url與（圖片網址）之間不能有空白，把空白刪掉即可。你試試。
另外，你用ie 看你的 blog 時，有版面跑掉的情形嗎？好奇問一下
[回應]
感謝sam的幫忙，的確是那個空白鍵的問題。
關於IE，我不清楚你說的版面跑掉是什麼情性，我只知道用IE開部落格，上面應該出現的搜尋跟登出等操作介面，會不見。用Firefox就沒這個問題。
感恩^^
[回應]
感謝你寫那麼多很好的文章(我從很早以前就在看了,今天第一次流言),讓我不知不覺中對Blogger產生了興趣,不過我有一個小小的問題,就是阿你在這篇教學中有一部分程式碼如下
body#layout #main-wrapper {
margin-left: 0px;
margin-right: 0px;
width: 400px;
}
body跟#layout中間不用家空白嗎
[回應]
謝謝你不嫌棄啦，其實我只是讓我的悶騷個性有地方發洩而已 XD
而且我也是初學者呀，我只是把我學習的過程及跌倒的地方標明出來罷了。
關於你的問題呀~呃…沒錯呀~它接受啊~
因為那段語法是摘自我原本使用的模版 -羊男三欄式 gadget1.1里的片段，我看了一下書，應該是因為「包含屬性」的關係（Descendant Selectors）
ex：
table td { font-size:14px; }
div.sub a { font-size:14px; }
所以 #layout 之於body 是ok的
[回應]
你好
謝謝你寫了這篇詳細的教學
我想請問一下
關於這種功能有沒有一個名字呢？
只適用於blogspot嗎？
像pixnet、無名這類的服務供應商
可以修改嗎？
謝謝你～
[回應]
哈囉，首先呢感謝您的留言。
固定名字喔，就我之前的查詢、寫作過程，並沒有看到它有個固定的名字耶，以 kaie 來說，他是把它稱為 code style，但是有些人又把它歸類為「blockquote」的關聯技巧。
你可以再看看 blockquote 相關資料，以 css 技巧來說，效益性最高的就這兩個，其它就見仁見智(個人認為)
至於這個功能，只是 css 的一個小技巧而已，難得的是它的巧思，而不是技術部份，至於 pixnet、無名應該都可以用，就算直接套用不行，也是小修改一下即可。 ^_^
[回應]