起因
周末休息兩天, 今天新的一個上班周, 可能有點周末綜合征, 星期一早上來到公司之后, 打開Eclipse卻不想做什么, 那就看看技術帖子, 逛逛博客吧;
瀏覽了很多博客園上的帖子,發現很多博客主都定制了自己的博客樣式, 也有很多就直接應用了博客園推薦的皮膚, 本人之前也是直接應用博客園的推薦的皮膚.
皮膚名稱:darkgreentrip
用了一段時間之后感覺太沒個性, 但是又懶沒抽時間去自定制, 現在剛好,既然也沒心思工作, 那就花點時間來打理打理博客吧, 畢竟這是自己記錄技術的地方,裝飾的好點,自己看着也舒服.
開始
一, 選擇自己喜歡的模板
對於CSS技術好的你, 可以完全自己寫個新的模板, 這需要花些時間, 但是對於我只有上午的1個小時左右的時間來弄, 所以就應用了博客園提供的模板, 然后自定義了下自己的樣式:
管理 - 設置 - 博客皮膚 - 選擇darkgreentrip
我比較喜歡簡單,干凈的,所以這次就選擇了SimpleMemory這款, 可以根據自己的愛好選擇
二, 自定義樣式
這個可以通過瀏覽器來幫我們, Chrome, 火狐, IE都可以, 我這里用的是谷歌的Chrome
按下F12進入開發者模式,來查看HTML代碼
可以清楚的看到頁面的分層結構,他的CSS樣式也可以在右側詳細的看到
如果我們想要修改,可以現在里面試着添加修改, 符合自己的要求之后將它copy下來,paste到博客園的 設置 - 頁面定制CSS代碼 中,
copy
paste
示例
標題
給標題設置背景色
調試發現標題是出於id為cnblogs_post_body的div中, 標題一的標簽為h1, 標題二的標簽為h2, 標題三的標簽為h3, 標題四的標簽為h4, 標題五的標簽為h5, 將CSS添加到 頁面定制CSS代碼 框中
顯示結果為:
類似的可以修改博客標題, 字體大小, 導航欄, 側邊欄等等.
公告欄
公告欄也可以添加很多自己喜歡的樣式,而且可以添加時鍾, 訪問人數, 訪問地區, 個人介紹等等
我這邊引用了 hone hone clock人體時鍾 和 訪問次數
就知道你喜歡 hone hone clock, 喜歡的朋友可以將以下代碼貼進博客園的 博客側邊欄公告（支持HTML代碼）（支持JS代碼）中就可以了,當然你也可以修改下,
1 <html> 2 <div id="myTime"> 3 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="180" height="80" id="honehoneclock" align="middle"> 4 <param name="allowScriptAccess" value="always"> 5 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf"> 6 <param name="quality" value="high"> 7 <param name="bgcolor" value="#ffffff"> 8 <param name="wmode" value="transparent"> 9 <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="180" height="80" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> 10 </object> 11 </div> 12 </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或審查元素）。當然，簡潔也是一種美，適度最好了。
e. 頁首\頁腳Html代碼
這兩個控制框就是在你當前頁面的最上方頁眉或最下方頁腳添加一些內容，也比較簡單，大家可以試一試。
文章適合入門級，個性化要和已選模板色調一致，最后希望大牛們制作更多好看的模板吧。
f. 文章目錄
對於一片很長的博文來說，建立一個目錄索引，是很方便閱讀的，網上介紹的文章也很多，這里我介紹一個樣式相對比較好的，可以去看看(點我)，我自己也是在用這個。