個人博客轉移至：https://sunhwee.com，第一時間會先發在前者，有時間再更新至博客園。
閱讀目錄：
1. 前言
2. 定制自己的博客
3. 后語
一 . 前言
我們在上一美化教程篇中，已經介紹了不少的內容了，這是上一篇鏈接：博客園美化教程大集合——極致個性化你的專屬博客
這一篇咱們接着前面的繼續為自己的博客主頁添加美化項、適用項和調整代碼。
同樣的道理，開篇先說幾個點：
首先，使用的模板仍然是：AnotherEon001，講道理，其他皮膚模板，下面的定制代碼也是可以用的，只不過你需要做一些修改，比如修改位置，大小，顏色，布局搭配等參數。你要什么樣子，就改成什么樣子。代碼不難，你需要看一看，然后改一改，同樣的博客皮膚應該是可以直接復制粘貼就行了。
再者，再次強調一下：每個人喜歡的風格不一定相同，我用這個皮膚定制的主頁，我覺得簡單明了，方便管理，比較實用，所以如果你是文藝青年，也可以選擇其他皮膚或博客網站或者自己建個人主頁，來設計制作比較文藝美觀的界面。
最后，能通過自己的手來優化定制一個自己比較喜歡的博客主頁，想必以后在上面寫博客、做筆記、記錄分享學習生活也會是一件心情愉悅的事情！
好勒，廢話不多說了，咱們開始吧！
二. 定制自己的博客
0. 美化整體效果
定制之前仍然先來看看定制的整體效果。
1. 准備工作
同樣的道理，和我前一篇教程一樣的步驟，要讓定制代碼有效果，首先得要有網站JS權限，這個申請步驟可以看我前一篇：博客園美化教程大集合——極致個性化你的專屬博客 的准備工作部分。
2. 添加博客背景音樂插件
完成上面的工作之后，就開始為你的博客頁面的公告欄里面添加音樂播放插件。這個音樂播放器插件是一款開源插件，有着友好的api，簡單配置好參數就可以使用，github倉庫鏈接為：https://github.com/MoePlayer/APlayer 當然，如果你對此還比較感興趣，也可以去github 分支一個，針對不同網站或者應用，修改代碼提交你的PR，這樣也是極好的。
本來這個插件默認的尺寸參數這些是長下面這個樣子的，可以用作網頁的頁首，頁面內嵌，或者按照吸底的方式停靠在頁面底部，尺寸還是有些大的，所以我們如果不修改他默認的元素參數，那么放在公告欄里面，本來公告欄是比較窄的，所以會有一些內容顯示錯位、或者不顯示。
當然如果你會用瀏覽器的開發者功能（按F12），就很簡單了，你可以選中指定控件、元素，然后在F12調試框中的CSS樣式代碼中調數值，看控件變化，調到合適了，就把對應CSS代碼復試粘貼到，博客設置里面的“頁面定制CSS代碼”框中，如下：
以上方法主要用於你可以將這個音樂插件擺放在頁面的任何位置然后調節到需要的尺寸和樣式。
但，如果你不會，也沒關系，因為我已經修改好了，你如果是和我一樣的皮膚模板直接復制粘貼就可以了，如果是其他皮膚模板，你只要看看插件github上面的中文手冊，然后結合我上面的方法來調整就是了，只要你動手試了，會發現不難，光看着我的文字可能覺得不好操作。
下面是代碼，你需要把它復制粘貼到“博客側邊欄公告（支持HTML代碼）（支持JS代碼）”和“頁面定制CSS代碼”框中，如果顯示有些錯位，那么你照上面的去調調參數
頁面定制CSS代碼：
/* 定制公告欄音樂插件的樣式 */ .aplayer { font-family: Arial,Helvetica,sans-serif; /*音樂插件字體*/ margin: 0px; /*音樂插件與公告欄左邊的邊距，0px就是直接抵到公告欄左邊的邊上*/ box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); border-radius: 2px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; }
博客側邊欄公告（支持HTML代碼）（支持JS代碼）：
<!-- 為博客底部添加音樂組件 --> <div id="player" class="aplayer"></div> <link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet"> <script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> <script type="text/javascript"> var ap = new APlayer({ element: document.getElementById('player'), narrow: false, autoplay: false, <!-- 是否自動播放 --> showlrc: false, theme: '#F5F5F5', <!-- 插件背景顏色，建議和你的公告欄背景色一樣，這樣融為一體的感覺 --> music: [{ title: '音樂1', author: 'Valentin', url: 'https://files.cnblogs.com/files/shwee/Valentin-A_Little_Story.pdf', pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic4.png' }, { title: '音樂2', author: '林海', url: 'https://files.cnblogs.com/files/shwee/%E6%9E%97%E6%B5%B7-%E7%90%B5%E7%90%B6%E8%AF%AD.pdf', pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png' }, { title: '音樂3', author: '趙海洋', url: 'https://files.cnblogs.com/files/shwee/%E8%B5%B5%E6%B5%B7%E6%B4%8B-%E3%80%8A%E7%9E%AC%E9%97%B4%E7%9A%84%E6%B0%B8%E6%81%92%E3%80%8B%E5%A4%9C%E8%89%B2%E9%92%A2%E7%90%B4%E6%9B%B2.pdf', pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic2.png' } ] }); ap.init(); </script>
PS：可能大家會看到上面代碼里歌曲里面的鏈接中歌曲后綴名是pdf，會納悶，其實是對的，那是因為我把歌曲上傳博客園文件里面了，而博客園上傳文件格式后綴不支持mp3上傳，所以我就把歌曲的后綴名改成了博客園后台支持得文件后綴名，我就隨便改了個pdf，這樣上傳后台就認這個文件了，當然你也可以改成其他后綴名，這個問題不大，只要是歌曲文件，他的內部編碼不會變，你把這個文件的源地址給播放器，播放器插件讀到這個文件就能解碼播放。除此之外，你也可以吧歌曲上傳其他地方或者使用在線的歌曲鏈接，不過這樣官方把歌曲鏈接改了，你就播放不了了，所以還是建議把歌曲文件和封面照片上傳博客園上，然后把鏈接丟給插件就行了。把歌曲鏈接改成你的就行了哦，自己想怎么改就怎么改，隨時換上自己最新喜歡的曲目，有背景音樂寫隨筆 讀文章心情都有節奏一點 ，你試試吧。
效果如下：
3. 為博客文章內容主體定制漂亮的顯示樣式
我們平時在看到別人的博客，看到那種內容層次清晰，排版漂亮的文章，總是心情大好，閱讀也是一件賞心悅目的事情。那么，我們平時寫出的文章怎么也能夠達到那種效果啦，那我們就來試試吧。
嘿嘿，代碼不用你去寫了，直接用我下面的就行了，就可以為博客文章內容主體定制漂亮的顯示樣式，這個樣式還是非常顯眼和漂亮的，設置合理的標題可以讓文章思路更加清晰，還可以為后面的生成文章目錄做准備。目錄就是提取這些h2,h3組合而成的。當然，以后寫博客隨筆文章的時候，標題最好就按這個格式來，這里的標題設置的h2、h3的格式，你也可以修改一下，按你平時常用的標題格式，比如把下面h2、h3改為h1、h2，以后你就按h1、h2的格式寫就是了。好勒，把下面代碼粘貼到“頁面定制CSS代碼”框中：
頁面定制CSS代碼：
/*文章內容詳情頁面的標h2、h3的樣式*/ #cnblogs_post_body h2 { background: #2B6695; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 17px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; } #cnblogs_post_body h3 { background: #2B6600; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 13px; font-weight: bold; height: 24px; line-height: 23px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; }
效果如下：
4. 公告欄日歷樣式設置
這一項算是一個雜項，可以調節公告欄的日歷樣式，你可以調調參數值，讓日歷尺寸，顯示背景這些更美觀點，把下面代碼復制到“頁面定制CSS代碼”框中，然后去修改對應參數值，然后看你的博客日歷顯示效果
頁面定制CSS代碼：
/* 公告欄日歷樣式設置 */ .Cal { border: 1px solid #F5F5F5; width: 190px; /*日歷寬度*/ font-family: Arial; font-size: 13px; margin-top: 10px; margin-bottom: 10px; height: 180px; background-color: #F5F5F5; /*日歷背景顏色*/ margin-left: 0; } /*日歷的第一行標題 年份/月份這一欄配置*/ .CalTitle { background-color: #F5F5F5; border-color: #adf; font-family: Arial; font-size: 14px; color: #000; margin-left: 0; padding: 0; height: 100%; font-weight: bold; } /*日歷的第二行 星期信息這一行配置*/ .CalDayHeader { background-color: #F5F5F5; }
效果結合你自己的修改和自己的博客日歷顯示效果看看就是了。
5. 待續...
三. 后語
這篇是前面一篇教程的繼續版，后面有一些有意思的美化項，后面再接上，目前就寫這幾個。
還是那句話，這個教程主要面對沒有啥這方面的基礎，且正好有這個想法和閑心來把自己的博客主頁弄一弄，整得方便自己用一點，按個人喜好，如果有大佬看到這篇，覺得不妥，請略過這個就是啦，哈哈。
畢竟，博客用來記錄平時學習生活啥的，有個方便易用，自己比較喜歡的界面，當然寫起東西來心情也會更好一點嘛，希望這點短短的文字對讀者有點點幫助，那當然是最好的。
畢竟，分享——使人快樂！─=≡Σ(((つ•̀ω•́)つ