Coffee 1.0

釋出前的廢話:

BlackCoffee 的版型是我一直想要做的,這也是最近常見的版型之一,左邊主文快與右邊 Sidebar 齊高,而 Title 中如果放入背景圖片又感覺相當有主題性,所以就把 gadget 2.0 拿來修改成 BlackCoffee (Sidebar 看起來不就像背耳一樣嗎?XD)特色跟其他版型大同小異,有興趣者可以直接下載後套用即可,有興趣的可以直接繼續看下去。

PS:template 是不會影響任何 PO 文的,因為 PO 文是後台或其他發文程式與資料庫之間事情,跟 template 無關。

主要 BlackCoffee 特色說明:
BlackCoffee in Size
雖然 1024*768/1280*800 以上解析度已經逐漸成為主流,但是這一次把版面調整到 855 px 寬度,讓整體看起來較為細長,也較為有氣質一點(XD),主文的部分依然擁有 500 px 的寬度,嵌入 flickr 圖片或是其他影音內容應該不會有什麼問題。
右邊兩欄都是一欄 125px,一欄 165px ,對於多數網站外掛或像是 Google AdSense 摩天大樓型式欄位等廣告都應該很好處理與應用。
BlackCoffee Header
標題區塊直接支援 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.

BlackCoffee in Middle
文章之間直接支援 Blogger 中 Google AdSense 的相關設定,現在要在文章之間插入 Google AdSense 的廣告欄位,使用者不用再費心於原始碼中尋找安插廣告欄位的位置,直接變更 Blog Post 的設定即可,也能讓網站的廣告效果更好。在主文底下也可以加入其他的網頁元素,增添豐富度。因為是修改自 gadget 2.0 ,快速新增書籤功能也一併加進來了。
BlackCoffee in End
底下 footer 的部分亦有一欄(前面範例圖是看不出來啦) 可以新增 768*90 超寬型 Google AdSense 廣告欄位,或是新增一些網站追蹤等程式,當然,直接放入 HTML Table 規劃成多欄位的各式連結功能也可以喔!(不過相對應的 CSS 可能要麻煩你自己新增了)
BlackCoffee in Fonts and Color
修改部分的設定讓字型與顏色的控制可以符合版型的部分,使用者不用再與不熟悉的 CSS 繼續奮戰(但是要更改背景圖片、調整特定區塊文字大小等,還是得自行透過 CSS 進行設定,這個功能的目的只是方便調整整體模版的顏色基調而已)。如果你覺得要改成藍色咖啡、黃色咖啡、紅色咖啡、牛奶咖啡、香草咖啡、、、等等,都隨你自己高興!
BlackCoffee BackStage
後台設定網頁元素版面位置直接完整對應,讓使用者在操作與新增各類網頁元素時直觀且方便。

其他延續與繼承功能:
1.上方 Navbar 自動隱藏(Firefox 自動隱藏,IE中則是透明狀態)

釋出後的廢話:
BlackCat、Gadget 之後,又搞了個 BlackCoffee,只是希望大家覺得好用啦~。(笑)

製作 Blogger 專用的範本,目的是希望使用者將心力放在「美化」或「設定個性化」之上,解決使用者遭遇一些版面配置與規劃上需要與 Blogger Code 奮戰的問題,讓使用者享受「個性化」的樂趣,而不要套用一些大家都在穿的制服後,連修改顏色的機會都沒有。

下載、上傳,開始打造自己的 Blog 吧。
Comments