打造本身的博客園頁面

剛接觸博客園時，總有一種要定製打造本身博客頁面的衝動，後來感受原有的模板足夠了（博客園提供了大量的模板），沒有作這項工做。今天不太忙，稍微研究了下博客園的頁面定製功能，記錄以下。

首先，園子裏大都是技術宅，你們分享知識，界面在必定程度上並不過重要。並且這裏作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代碼

這兩個控制框就是在你當前頁面的最上方頁眉或最下方頁腳添加一些內容，也比較簡單，你們能夠試一試。

文章適合入門級，個性化要和已選模板色調一致，最後但願大牛們製做更多好看的模板吧。