博客園自定義樣式

時間 2019-11-08

標籤博客自定義樣式简体版

原文原文鏈接

原由

週末休息兩天, 今天新的一個上班周, 可能有點週末綜合徵, 星期一早上來到公司以後, 打開Eclipse卻不想作什麼, 那就看看技術帖子, 逛逛博客吧;php

瀏覽了不少博客園上的帖子,發現不少博客主都定製了本身的博客樣式, 也有不少就直接應用了博客園推薦的皮膚, 本人以前也是直接應用博客園的推薦的皮膚.html

皮膚名稱:darkgreentrip面試

用了一段時間以後感受太沒個性, 可是又懶沒抽時間去自定製, 如今恰好,既然也沒心思工做, 那就花點時間來打理打理博客吧, 畢竟這是本身記錄技術的地方,裝飾的好點,本身看着也舒服.瀏覽器

開始

一, 選擇本身喜歡的模板

對於CSS技術好的你, 能夠徹底本身寫個新的模板, 這須要花些時間, 可是對於我只有上午的1個小時左右的時間來弄, 因此就應用了博客園提供的模板, 而後自定義了下本身的樣式:app

管理 - 設置 - 博客皮膚 - 選擇darkgreentrippost

我比較喜歡簡單,乾淨的,因此此次就選擇了SimpleMemory這款, 能夠根據本身的愛好選擇字體

二, 自定義樣式

這個能夠經過瀏覽器來幫咱們, Chrome, 火狐, IE均可以, 我這裏用的是谷歌的Chrome網站

按下F12進入開發者模式,來查看HTML代碼spa

能夠清楚的看到頁面的分層結構,他的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或審查元素）。固然，簡潔也是一種美，適度最好了。