博皮是基于模闆 SimpleBlue 做的修改, 改動前後看上去差别還是挺大的, 但當然不能跟專業的網頁美工做的效果相比, 我不是做美工的...隻了解一些 html 和 CSS 而已, 讓各位見笑了:) 如果你也喜歡我的博皮, 可以把你的部落格也修改稱這樣. 修改方法在 管理->設定-> 通過CSS定制頁面風格, 不過最好先将你的部落格模闆設定成 SimpleBlue, 因為每個模闆 div 的的名字可能不一樣. 然後打開我部落格的 CSS, 将 CSS 粘貼到你設定界面的 "通過CSS定制頁面風格" 文本框中.
部落格的背景圖檔
改動的部分還挺多的, 比如部落格背景圖檔, 設定背景圖檔還需要更改部落格的頭部 div , 比如将它的背景設為 none, 這樣突出整個 body 的背景. 如果你不是很喜歡這個背景, 可以選擇另外的圖檔, 但寬度最好是700px, 不然你還需要調整背景的絕對定位大小. 修改背景方法如下, 找到如下的代碼:
#topBackground{
background: url(http://pic002.cnblogs.com/images/2011/70278/2011052216374836.jpg) no-repeat center top;
top: 0;
height: 400px;
position: fixed;
width: 100%;
z-index:-1;
}
#footer{
bottom: 0px;
height: 200px;
position: fixed;
width: 100%;
background: url(http://pic002.cnblogs.com/images/2011/70278/2011052216374836.jpg) no-repeat center bottom;
z-index: -1000;
color: transparent;
display:block !important;
}
更改 background 中圖檔的 url 屬性即可.
部落格的主題圖檔
部落格右上角表示部落格的主題, 比如我的主題是.NET, 當然你也可以換成其它的圖檔, 找到如下代碼, 更改其中 background 的 url 屬性. 部落格背景圖檔和部落客題圖檔均考慮了小螢幕尺寸筆記本的閱讀, 當螢幕寬度變成 800px 的時候也不會影響美觀.
/*導覽列*/
div#navigator {
position: absolute;
top: 0;
right: 0;
padding: 0;
height: 80px;
border: none;
width: 300px;
background: url(http://pic002.cnblogs.com/images/2011/70278/2011051911433598.png) no-repeat center bottom;
}
首頁子產品的修改
關于部落格, 我覺得應該突出顯示部落格内容, 是以我将左邊的 siderbar 背景設定為 none 了, 并将背景色設定為 transparent了. 如果你不喜歡, 可以找到如下代碼, 将其删除:
div#sideBar{
border:none !important;
background-color:transparent !important;
}
不知道為什麼, 原來我有些部落格預設的首頁, 有些部落格上方顯示部落格發表日期, 有些則不顯示, 為了格式的統一, 我用 CSS 将它們統一都不顯示, 如果你需要顯示部落格發表日期, 請找到以下代碼, 并删除它們:
/*不顯示随筆釋出日期*/
.dayTitle {
display:none;
}
部落格小功能樣式的修改
1. 送出評論的按鈕
原來部落格下面送出評論的按鈕比較普通, 我将其稍微修改了一下, 格式與 "綠色通道" 裡 "好文要頂" 的樣式差不多.
/*送出按鈕*/
#btn_comment_submit{
width:55px;height:25px;border:none;
background-color:#2DAEBF;
-webkit-border-radius: 10px;color:white;
font-weight: bold;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
font-size: 10pt;
}
2. "推薦" 和 "反對" 按鈕
另外我還很 "無恥" 的隐藏了評論按鈕的 "反對"按鈕, 自己辛辛苦苦大半天寫的部落格被人"反對", 其他人都 "推薦", 就那麼個别人是真的反對, 還是惡作劇點了反對, 心裡多少會有點不舒服的. 對内容不滿可以寫評論, 一聲不響得點個反對算什麼. 當然對于真的想點 "反對" 的園友們肯定還是有辦法點 "反對" 的...
3. 綠色通道
對于綠色通道, 我隻顯示了其中的兩個 —— "好文要頂" 和 "關注我", 其它兩個 "收藏該文" 和 "與我聯系" 可能點的人不多, 肯定沒有前兩個不在一個數量級上, 是以我隐藏了這兩個按鈕, 而且真的需要 "收藏該文" 和"與我聯系"的話, 在部落格裡有其它連結可以實作這兩個功能的.
4. 部落格下方的廣告
關于部落格下面的廣告, 不知為什麼我在背景配置裡設定的不顯示廣告, 但其實在部落格下面還是顯示廣告. 然後我用 JQuery(開始用的JS, 但發現各個浏覽器對JS的處理效果不同) 将廣告從 DOM 樹中移掉了, 但我測試之後發現其實廣告是先顯示之後才被移掉的, 如果廣告是按 IP 計算的話, 應該不會影響廣告的收入吧 :) 如果園子要求部落客有義務必須在部落格下方顯示部落格園的廣告的話, 請說一下, 我會把移除廣告部分的代碼删除的.
推薦使用 Windows Live Writer
經常看到一些園友的部落格, 内容貌似還挺好的, 但就是排版不太好, 比如段落間距太大或者字型這麼大那邊小, 插入的圖檔很大且留白部分十分多等等等等, 毫無疑問這樣會影響讀者的閱讀體驗的. 推薦大家使用 Windows Live Writer 寫部落格, 隻需要輕松設定幾個步驟就可以将你部落格園的帳号綁定到 Windows Live Writer 中, 然後你就可以用它來寫部落格并發表了.
代碼高亮部分, 我安裝的是 SyntaxHighlighter, 你隻需要下載下傳這個插件, 在 Windows Live Writer 中加入這個插件就可以使部落格裡的代碼支援高亮了. 注意使用這個插件, 需要在背景設定裡将預設編輯器設定為 TinyMCE. 除了這個代碼插件, 當然你在 WLW 裡的 "添加插件" 裡還會發現其它支援代碼高亮的插件的, 比如 Paste from Visual Studio. 請大家不要亂安裝插件哦! 先看一下這個插件用的人多不多, 因為 WLW 貌似并不是很安全的, 在程式中如果引用 WLW 的某個 dll, 是可以擷取這個 dll 裡的賬戶名和賬戶密碼的! 當然我至今還沒發現有這種流氓插件...
寫在最後
如果您對部落格皮膚有什麼看法或意見, 歡迎交流讨論.
一個令别人第一眼看上去舒服的部落格是有必要的, 但更重要的是部落格的内容 :)
本文連結: http://www.cnblogs.com/technology/archive/2011/05/22/2053802.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)