無敵博皮 之 乾坤大變色——上篇:使用方法

看文章前,先請看右側,在“公告”之上的“主題風格”,試着點幾下後面的小色塊兒,如果您沒有覺得什麼地方變了,或者您壓根兒就沒看到“主題風格”,那麼請不要繼續看此文,而應該直接拖動滾動條到評論區,謝謝合作!(IE7/8 + FF3 測試通過)

所有本文將用到的文件:

本樣式依國際慣例,使用了博客園的 Custom 模板,同樣需要禁用模板本身樣式,並把上面七個CSS文件中任意一個你喜歡的樣式複製到自定義樣式的文本框裏去,然後保存即可,這樣就可以得到一個簡單的樣式了,你也可以修改部分代碼以使它變得更美觀。

呵呵,如果事情如此簡單,也不用我在這裏廢話了,所以,下面那戲開場~~~~

剛纔你點了右上側那幾個小色塊兒了吧?好玩兒不?這就是這套skin最大的特色,而奧祕就在於上面那些文件中惟一的JS文件。

依然需要先完成上面的那些步驟,完成之後,你需要把這個JS文件添加到頁面中去,能夠實現這個功能的界面中 [管理] -> [選項] -> [Config] 中,有三個地方可以用,公告、頁首Html代碼和頁腳Html代碼,雖然腳本按道理講應該放到最後,但是因爲這個JS裏需要加載要用到的CSS文件,所以建議放在“頁首Html代碼”中,像下面這樣的一行代碼即可:

<script type="text/javascript" src="http://files.cnblogs.com/dingxue/css1_script.js"></script>

如果你直接這樣引用,那麼就沒有其他工作要做了,如果你把這些CSS文件傳到了其他的某個地方,那麼需要修改JS文件中的前幾行,只需要修改相應的URL即可,很簡單,如果有什麼不明白,可以看本系列的第三篇,裏面有比較詳細的介紹。

使用步驟回放:

1. 登錄後進入自己的博客,點擊導航中的“管理”後,進入[選項] -> [Configure]
2. 在“Display Skin”下面的下拉列表中選擇“Custom”
3. 複製上面七個CSS文件中你最喜歡的一個的內容到“通過CSS定製頁面”下面的文本框
4. 選中“禁用模板默認CSS”前面的複選框
5. 不需要換膚功能請跳到第9步,不想另存JS/CSS文件請跳到第8步(建議)
6. 下載所有CSS文件並上傳到某個地方
7. 修改JS文件前幾行中的URL爲你的CSS文件對應URL,並上傳JS
8. 在“頁首Html代碼”中添加對JS文件的引用(引用代碼見上面)
9. 到頁面下面點擊“SAVE”按鈕以保存設置

請注意:

腳本文件中使用了cookie,用於記住用戶的選擇,cookie有限期爲30天,當用戶選擇了一個風格之後,再訪問其他頁面或下次訪問時,會自動使用最近一次選擇的風格。由於CSS加載和JS執行的問題,可能會有一瞬間的自動加載延遲,導致頁面在加載完閃一下。

本skin挑戰了一些博客園不支持的功能,所以無法發佈爲正式模板,所以你只好自己動手才能豐衣足食。而且因爲博客園功能太多了,有些地方是我所沒有用過的,可能樣式中漏掉了不少,目前已知的有側邊欄的日曆、找找看等,模塊中的相冊等,如果你需要這些,請一定記得改寫樣式,以添加這些支持。

特別鳴謝:

偶老婆:元旦三天假期就折騰這個了,也沒時間陪她出去逛逛……

米隨隨:http://www.misuisui.com,我以前的同事,換膚的想法最初來源於他的博客,這小子前些日子說牛B大發了,把空間搞到了國外,不過最近也不知道是外國友人不友好還是被G了,經常打不開他博客。

新浪博客和網易博客:http://blog.sina.com.cnhttp://blog.163.com,有幾個樣式的配色方案雛形來自於這兩個博客站。

圖靈出版社及他們翻譯的那本《寫給大家看的設計書》:這本書真的不錯,顏色、對齊等很多東西借鑑了裏面的設計原則(配色沒做好是我的問題,和書沒有關係)

Omar AL Zabir和他的ensure:http://msmvps.com/blogs/omar/,這位MVP同學總喜歡搞些稀奇古怪的東西,加載CSS最初的方案來自於他的ensure,雖然現在實現略有不同,但依然感謝他帶來的靈感。

百度和google:搜索引擎真是強大,想要的東西全都找得到,不服不行啊。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章