2007年1月25日 星期四

(轉貼)改造裝潢 Blogger!

 
文章來源:
 
 
 

1.26.2007

漫談改造裝潢 Blogger!

準備瘋狂改造Blogger,建立良好觀念為首務!

每個玩部落格的朋友,肯定都了解擁有好而充實的文章內容才是部落格最為重要的靈魂,才是王道!就算最最陽春的版型,一旦擁有好文內容,那將勝過華麗百萬倍,卻沒有內容的部落格!

所以充實自己部落格的內容絕對才是第一等課題!

除了努力充實樹立自己文章風格外,當然若能再親手佈置出別具風格別出心裁的部落格外觀,那肯定更能為部落格加分,起碼自己看了開心,訪客也能在更舒服的環境下賞圖閱文!那麼花點時間好好打造打造、裝潢裝潢自己的部落格,也就成了每個部落客的第二重要課題了!


拜Blogger給予使用者極度自由的使用環境,想一展身手隨心打造版型早已絕非難事!好比我的 Ben's部落不及格 裡,就完全找不到一絲原始Blogger味,更找不到原始玩意兒,絕對可以完全原創,並且包含所有大大小小的圖標!!

如果部落格上去掉申明 I Power Blogger,再使用指定域名功能,不看原始碼!壓根兒不會知道原來這是Blogger!

然而著手打造裝潢Blogger版型外觀前,個人認為先將需求程度給切割開來是必須的!一如"新增功能"與"外觀美化",實在不能也不該混為一談,或許事先確認自己能做到什麼程度,進而規劃好將改造到何種程度才是!畢竟部份修改是稍稍需要一些門檻的!不過也甭灰心,並非澆冷水,我們依然可以擇其重點,一步步學習改造!

以下約略概括分為四大項改造進程:

• 為Blogger增添原本未提供之功能(如繼續閱讀、標籤雲、表情等...
• 為Blogger改變不同環境參數(如字體大小、顏色、字間等...
• 為Blogger替換原始版型圖標(如底圖、小圖標、側邊欄圖標等...
• 為Blogger徹頭徹尾改頭換面(改變任何區塊尺寸、色彩與圖像等...

第一項 為Blogger增添原本未提供之功能:★☆☆☆☆

此為最基本也是最重要的需求,畢竟當你採用了自由度高的Blogger,會發現與國內其他Blog服務業者不同,Blogger分配僅給你一間配備普普傢具的空屋子,充其量再配些基本衛浴設備罷了!也就是說就讓你得以發圖文、能回應,有分類、有存檔,擁有一個部落格最最基本的功能!

這當然無法滿足所有部落客,所以我們必須想辦法自行添購"高級"傢具!而目前這個部份原本是最為困難的,因為我們不但必須熟悉JavaScript等其他相關程式語法,還要熟透Blogger的一整個版型結構,這對一般人根本難以應付,別說寫...光是看,那比火星文還火星文的東西,哪那麼容易入門,光想都頭痛。

不過拜網路上已不乏有先進大德開疆闢土的提供了很多先進功能與詳細的安裝方法,使得這些門檻極高的東西,如今都變得十分容易處理,透過Google大神或黑米等...極方便取得資訊,甚至於更有熱心朋友將幾乎所有能追加的功能給一整個彙整起來!等於完全不需要具備任何程式語法基礎,只要按步就班,仔細跟著範例步驟好好設定,通常都不成問題囉!

彙整功能參考連結:(服用兩帖,功能追加也就近乎十十全全了)
New Blogger Hack 大彙整 / 由老男人整理
擴充 Blogger 功能: jQuery way! / 由阿土伯撰寫
註:高人的 ID 都這麼經典嗎

第二項 為Blogger改變不同環境參數:★★☆☆☆

算是進入改頭換面的第一小步,如果你剛好處在一開始申請Blogger的時候,可仔細在Blogger提供的所有版型中,先慎選自己認為或接近最為滿意的字體大小版型範例,這樣在往後修改時,可以節省很多微調修改的部份!

新版Blogger在後台範本設定處,即內建字型與顏色基本設定功能,可供使用者調整字體大小與部份區塊顏色等等,方便好用,隨改隨看,極適合完全沒有CSS基礎的朋友修改!

但是內建修改顏色與字體的部份並不是所有地方都能設定,一旦遇到管不到的字或顏色,就必須自行進入修改CSS內容才行,而此部份當然就開始必需稍稍具有CSS的認識,千萬別因為這樣就退縮,其實CSS的規則並不真的那麼艱深難懂,這裡我推薦一個清楚簡單介紹CSS各項基本項目的教學網,每個主題皆詳細明瞭介紹,如能花點時間對照瀏覽,相信不用多少時間,你便能由Blogger中的CSS辨別出到底哪些在寫些什麼,又在控制什麼!

一個重點:版型中掌管CSS控制的語法規則,通通夾在<b:skin>與</b:skin>之間,在這之後大可先不須理會!
CSS入門教學連結:(詳讀觀看,會發現CSS其實也沒那麼複雜)
CSS Tutorial Traditional Chinese
CSS深入應用連結:(來自外國各式精彩CSS演試)
53 CSS-Techniques You Couldn't Live Without
註:不懂的看入門,熟透的取應用!

第三項 為Blogger替換原始樣版圖標:★★★☆☆

現在開始要進入進階步驟的開端囉,首先你必須開始具備繪圖的能力,好!可能你會說糟糕根本不會繪圖,由於我們僅要變換每種版型的內建圖案,所以可以直接透過不少網站上眾多的圖標,下載來直接套用,至於重點是要如何找出相關圖標在版型CSS中的位置,其實並不那麼難。

在上一項我們已經透過CSS教學網站稍稍有了CSS初步概念(什麼還沒去學∼撲!還不快去∼切∼),自然也就可以推敲出原始版型多會透過Background:這個CSS命令來置放所有版型圖檔,所以我們只要進到CSS中,對照找出不同位置的Background:來,也就可以找到每一原始圖標的出處,再透過無論是自己繪製,或網路下載的任何圖標,上傳到任一自己的網路空間(如Googlepages),取得連結路徑再將該對應的url路徑位置給換成新的路徑便算完成!

如果你懂得使用軟體自行繪製或修改圖檔,這裡提供一個保險換圖的小撇步,假設你不知或擔心新圖檔是否適合原始設定,可將Background:內的原始路徑圖標抓下來,再直接用繪圖軟體開啟修改,這樣便可不須擔心圖檔大小是否合適的疑慮!

各式圖標挖寶連結:(不須像我通通自己畫,找出適合自己的圖標)
Xicons
Iconfactory
Everaldo
註:再去站裡的連結,又能連結到更多圖標網站,多到脫窗!

第四項 為Blogger徹頭徹尾改頭換面:★★★★★

進入完全進階的修改項目,開始準備完整獨立量身打造Blog外觀,到這邊門檻就開始來了,首要基本條件,你必須熟悉對每個區塊大小、間隙以及顏色、層級等CSS應用規則,再來既然要改頭換面,不同的版型結構,當然就要繪製完全吻合結構的圖檔來好好襯托,所以擁有繪製任何狀態需求下的圖檔能力與熟悉相關繪圖軟體,也成了必要的條件之一,當然最重要的除了懂得運用繪圖軟體,不可避免的更要有天馬行空創意無限的腦袋,完成"發想設計版型外觀"的基本任務!

當然既然機車門檻處在腳邊,在外觀設計與繪製如果不是相關科系或對繪圖極有興趣者,可能難以短時間克服這個部份。

不過!至少在不須完全汰換或追加外觀下,只要熟讀CSS規則教學的講解,配合對照版型內的每個區塊,依然還是可以修改出完全不同以往版型的樣式,無論如何你可以不懂JavaScript,不熟製作網頁,但請試著摸透CSS基本規則,這絕對是改造Blogger版型最基本且重要的課題。

一個重點:透徹了解什麼是 margin: , padding: , border: , background: , position: 你的改造計畫就算成功一大半!!
華麗CSS版型連結:(沒有idea不打緊,看看別人巧思創意找靈感)
CSS Beauty
CSS Vault
CSS REMIX
Netcocktail
註:好站實在太多,讓各位慢慢欣賞找靈感!

修改與打造版型原本就是瑣碎冗長,且吃力不討好的工作,如果不是極熟練CSS等規則,還是必須要經過反覆不斷的修改與測試!最重要的是,無論你對自己的改版能力多麼的有信心,改版前的備份可千萬馬虎不得!!

沒有留言: