Blogger Template BlackCoffee
in IE6 
in FirefoxDownload BlackCoffee-2008-01-18.xml | DEMO 參考網頁
釋出前的廢話：
BlackCoffee 的版型是我一直想要做的，這也是最近常見的版型之一，左邊主文快與右邊 Sidebar 齊高，而 Title 中如果放入背景圖片又感覺相當有主題性，所以就把 gadget 2.0 拿來修改成 BlackCoffee （Sidebar 看起來不就像背耳一樣嗎？XD）特色跟其他版型大同小異，有興趣者可以直接下載後套用即可，有興趣的可以直接繼續看下去。
PS：template 是不會影響任何 PO 文的，因為 PO 文是後台或其他發文程式與資料庫之間事情，跟 template 無關。
主要 BlackCoffee 特色說明：
雖然 1024*768/1280*800 以上解析度已經逐漸成為主流，但是這一次把版面調整到 855 px 寬度，讓整體看起來較為細長，也較為有氣質一點（XD），主文的部分依然擁有 500 px 的寬度，嵌入 flickr 圖片或是其他影音內容應該不會有什麼問題。
右邊兩欄都是一欄 125px，一欄 165px ，對於多數網站外掛或像是 Google AdSense 摩天大樓型式欄位等廣告都應該很好處理與應用。
標題區塊直接支援 Blogger 後台直接設定 Title 背景圖片的功能，但是因為抓圖順序抓錯，這是沒有圖片時的情況，整個 Title 變成較為細長，看起來有沒有氣質啊？（屋喔～）標題區塊的預設高度會隨著圖片高度產生改變，使用者只要掌握好圖片的寬度（520px 以上）與高度（450px 以上），即可放入自己喜愛的圖片當成標題背景，效果如前面幾張圖那樣子，應該頗有焦點（依據原始的 Widget 設定，圖片現在是置中排列，需要自行設定 CSS 才可以讓它重複填滿）。
這是範本內說明：
Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width. This results in a margin-width's worth of pixels being cropped, which is probably better than having them overflow out of the div.
文章之間直接支援 Blogger 中 Google AdSense 的相關設定，現在要在文章之間插入 Google AdSense 的廣告欄位，使用者不用再費心於原始碼中尋找安插廣告欄位的位置，直接變更 Blog Post 的設定即可，也能讓網站的廣告效果更好。在主文底下也可以加入其他的網頁元素，增添豐富度。因為是修改自 gadget 2.0 ，快速新增書籤功能也一併加進來了。
底下 footer 的部分亦有一欄（前面範例圖是看不出來啦） 可以新增 768*90 超寬型 Google AdSense 廣告欄位，或是新增一些網站追蹤等程式，當然，直接放入 HTML Table 規劃成多欄位的各式連結功能也可以喔！（不過相對應的 CSS 可能要麻煩你自己新增了）
修改部分的設定讓字型與顏色的控制可以符合版型的部分，使用者不用再與不熟悉的 CSS 繼續奮戰（但是要更改背景圖片、調整特定區塊文字大小等，還是得自行透過 CSS 進行設定，這個功能的目的只是方便調整整體模版的顏色基調而已）。如果你覺得要改成藍色咖啡、黃色咖啡、紅色咖啡、牛奶咖啡、香草咖啡、、、等等，都隨你自己高興！
後台設定網頁元素版面位置直接完整對應，讓使用者在操作與新增各類網頁元素時直觀且方便。
其他延續與繼承功能：
1.上方 Navbar 自動隱藏（Firefox 自動隱藏，IE中則是透明狀態）
釋出後的廢話：
BlackCat、Gadget 之後，又搞了個 BlackCoffee，只是希望大家覺得好用啦～。（笑）
製作 Blogger 專用的範本，目的是希望使用者將心力放在「美化」或「設定個性化」之上，解決使用者遭遇一些版面配置與規劃上需要與 Blogger Code 奮戰的問題，讓使用者享受「個性化」的樂趣，而不要套用一些大家都在穿的制服後，連修改顏色的機會都沒有。
下載、上傳，開始打造自己的 Blog 吧。
Claim:
1.如果你的 Blog 剛申請，且尚未手動增加任何的網頁元素（Page Elements），恭喜你，你可以直接套用這些面版無虞。
2.如果你已經開始使用你的 Blog 了，直接套用這些面版將會失去你所有手動新增的網頁元素（Page Elements），不過完全不會影響你所發佈的文章（Posts）、草稿（Drafts）。
3.如果你已經有手動新增的網頁元素（Page Elements）或是曾經修改過你的 Template，請先備份一份；當你上傳這邊的檔案並儲存時，系統會提示你將會有些網頁元素被刪除，要套用版型的話請「確認」。
4.網頁元素（Page Elements）要重新建置相當容易，就算全部刪除也無損你原本在 Blog 中創作的內容，是否要套用版型來重新設計你的 Blog ，請自行斟酌，恕不負責。
5.『救援或服務』：『沒有！！』改爛了就是重新上傳你的備份，或是重新挑一個新範本套用即可。
6.如果有任何此 Blogger 範本功能上的 Bug ，歡迎回覆留言以進行修正（只關於本範本 Blogger Code 的部份），不過這個範本已經在 Firefox、IE6、IE7 校正過，應該不至於會版型方面的問題，至於版面如何做進階的美化工作（字變大變小、加入圖片等等），就要麻煩使用者自行參考其他網站 CSS 的設定教學了。
7. Blogger 預設功能的限制，例如 title 背景圖片大小、排列、缺角等問題，因為範本是採用 Blogger 預設的功能，請發函向 Blogger 詢問該功能的限制，且 DEMO 網頁運作正常，如果你覺得是此範本的問題，你可以改用 Blogger 內建的範本，你會發現同樣的問題。
