剛接觸博客園時，總有一種要定制打造自己博客頁面的沖動，后來感覺原有的模板足夠了（博客園提供了大量的模板），沒有做這項工作。今天不太忙，稍微研究了下博客園的頁面定制功能，記錄如下。
首先，園子里大都是技術宅，大家分享知識，界面在一定程度上並不太重要。而且這里做Web前端的也大有人在，這里分享的知識只是入門級，大牛可跳過了，不喜勿噴吧。
博客園提供給用戶大量的博客模板供選擇，並在這些模板的基礎上，允許用戶進行一定的定制。當然，這種定制是有限的，主要包括以下幾個方面：通過CSS代碼定制代碼頁面風格、博客側邊欄公告、頁首\頁腳Html代碼以及標題和子標題。博客主頁中打開“管理”-“設置”即可見。
1.標題和子標題顯示在頁面頂部（blogTitle）
這部分比較簡單，大家可修改嘗試。
2.通過CSS代碼定制代碼頁面風格
通過CSS修改頁面風格部分是定制個人界面的關鍵。CSS層疊樣式表，它可以通過選擇器來設置HTML頁面中標簽、類、id及偽元素的屬性。
要想設置CSS樣式，我們需要知道博客頁面中有哪些HTML標簽、類，即要找到我們要修改的那部分頁面對應的HTML標簽是什么。這樣便需要查看網頁HTML源碼，在Chrome瀏覽器中，在要修改的地方右擊選擇“審查元素”即可。這里為了方便，我在火狐瀏覽器下通過FireBug插件來查看源碼，FireBug功能非常強大，這里有點大材小用了。
首先，對於頁面頂部對應源碼為：
<div id="blogTitle"> <div class="title"> <a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/houkai/">侯凱</a> </div> <div class="subtitle">記錄我的成長吧~</div> </div>
可知，我的頁面頂部受塊blogTitle控制，不同的模板可能不同，大家要按自己的來。我想修改頁面頂部的顏色，只需在CSS代碼框中添加
#blogTitle{ background-color:#0FF; }
#表示id選擇器，其他更多樣式設置大家可以學習下CSS知識了。
再進一步，我想讓設置下每篇文章的標題樣式，讓標題更突出。找到標題對應源碼：
<h1 class="postTitle"> <a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/houkai/p/3392679.html">8.SVM用於多分類</a> </h1>
設置標題的樣式如下（CSS框中添加）：
.postTitle{ background-color:#FF9; font-size:18px; margin-bottom:3px; }
.為類選擇器，此時，你會發現，所有文章的標題都變成了你剛設置的樣式，因為文章的標題都在class=postTitle的標簽內。
到這里，大家可以根據自己需要設置頁面各個部分的樣式了。
3.博客側邊欄公告（支持HTML代碼）
博客園允許博主修改側邊欄中公告部分的內容，所以我們會看到各種各樣的公告形式：
…
我們可以通過側邊欄公告代碼框，向公告中添加一些模塊，比如自己編寫的一些個人介紹、當前時間、訪問人數等等。
a添加訪問次數：
首先要在http://www.amazingcounters.com/index.php網站注冊，它會自動生成相應代碼，然后粘貼到公告框中即可，可對網站生成的HTML代碼做適當修改，我的代碼如下：
<div align="left"> <img border="0" src="http://cc.amazingcounters.com/counter.php?i=3153547&c=9460954" alt="Free Counters"> </div>
b.訪問來源位置：
通過http://www.clustrmaps.com/zh/admin/action.php生成訪問者地址分布圖，然后將代碼添加到公告框中即可，注意博客園默認只支持HTML代碼，JS代碼會忽略。
c.動態時間，代碼如下：
<object id="honehoneclock" width="160" height="70" align="middle" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param value="always" name="allowScriptAccess"> <param value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" name="movie"> <param value="high" name="quality"> <param value="#ffffff" name="bgcolor"> <param value="transparent" name="wmode"> <embed width="160" height="70" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="honehoneclock" bgcolor="#ffffff" quality="high" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" wmode="transparent"> </object>
第四行中http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf是時間Flash的網址，http://chabudai.sakura.ne.jp/blogparts/honehoneclock/下還有一些時間Flash，大家可選擇。
d.其他時間（右圖）
當然網上還有很多時間的Flash代碼，比如：
<embed width="180" height="180" align="middle" wmode="transparent" quality="high" src="http://images.cnblogs.com/cnblogs_com/csharp/clock.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
大家還可以添加更多模塊，比如天氣、廣告什么的。如果你發現別人博客中的模塊比較漂亮，那么那就研究下那部分的HTML源碼吧（FireBug或審查元素）。當然，簡潔也是一種美，適度最好了。
4.頁首\頁腳Html代碼
這兩個控制框就是在你當前頁面的最上方頁眉或最下方頁腳添加一些內容，也比較簡單，大家可以試一試。
文章適合入門級，個性化要和已選模板色調一致，最后希望大牛們制作更多好看的模板吧。