【博客園】樣式美化+網站統計訪問+添加網易雲背景音樂

新的美化樣式參考：博客園美化教程總結 - zxzhang - 博客園 注：

• 該樣式對應的皮膚：SimpleMemory，請記得更換。

• 還有目錄生成代碼默認是生成h2，h3的，需結合本身的須要替換爲h1，h2的。

參考：博客園怎樣查看別人使用的模板主題 - 獨鳴在彼岸的我的空間 - OSCHINA

---

下面內容是第一次美化，目前已經被替換，以前樣式代碼備份： 連接：https://pan.baidu.com/s/1ExwtvadNFkIrXG5GVaq_zw 提取碼：4w7u

---

 我參考別人的教程，對博客園樣式作了修改。後來突然被原創發消息：說我用了他的網站訪問統計... 當時一臉懵逼，還有網站訪問統計這種東西...根本沒有意識到好麼... 而後仔細看了一下參考的源碼，修改了兩個網站訪問統計相關的地方，終於搞定了這個問題。本身也頗有收穫，瞭解了網站訪問統計相關內容。 終於，從一些可量化的指標瞭解了本身博客的價值，好比訪問量、訪問來源、訪問最多的博客等。 以前寫博客都是本身瞎寫，除了別人的回覆，歷來不知道本身的博客還有什麼用。此次，本身的博客有了一個更好的量化指標，很不錯。

1、美化參考：

教程：博客園自定義皮膚扁平化設計 - marsggbo - 博客園 https://www.cnblogs.com/marsggbo/p/7464999.html

1.1 樣式優勢說明：

1. 比較喜歡總體樣式；

2. 最主要的：每篇文章都添加了目錄，同時有跳轉至頂部操做，瞭解文章結構特別有用；

1.2 個人使用說明：

1. 修改了網站的背景圖片；

2. 修改了標題的樣式，以及返回頂部的按鈕位置，還有一些跳轉連接；

3. 修改了訪問統計相關源碼。

2、網站訪問統計相關：

參考原教程。注意修改以下兩部分：

一、Amazingcounters統計：

該部分代碼主要統計點擊量，並在網站側邊欄展現。統計比較簡單，只有每日訪問量以及趨勢，沒有詳細的分析。 使用小問題：電腦版沒法展現該圖片，手機版倒能夠。沒搞懂緣由。 網站地址： http://www.amazingcounters.com/ 。如需使用，自行註冊，而後參照網站教程，用本身帳號的對應代碼替換以下部分：

<a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3216805&c=9650728" alt="AmazingCounters.com"></a>

二、友盟統計：

友盟的訪問統計特別好：訪問統計、IP統計、來源統計、訪問明細，以及每日的對比和預測等...和一個網站相關的指標幾乎都用，對分析網站特別有做用。 使用中沒發現問題。 網站地址：https://www.umeng.com/ 。如需使用，也是註冊，而後用網站給的代碼替換以下部分便可。

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1263920205'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1263920205%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>

注意：因友盟產品太多，網站訪問使用的是以下產品，請注意。

3、博客園添加網易雲背景音樂

一、獲取歌曲或者歌單外鏈：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=1988001584&auto=1&height=430"></iframe>

二、修改外鏈代碼

1. 將iframe改成embed

2. 添加class並修改控件大小

3. 添加style（讓其位於頁面右側）

最終以下：

<embed class="aplayer" style="margin-left: 83%;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=270 src="//music.163.com/outchain/player?type=0&id=1988001584&auto=1&height=270"></embed>

三、在博客園的後臺中添加代碼

3.1 添加頁面CSS代碼

/* 定製公告欄音樂插件的樣式 */
.aplayer {
   position: fixed;
   margin-left: 83%;
   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;
}

3.2 在頁首HTML最後添加歌單外鏈代碼：

<embed class="aplayer" style="margin-left: 83%;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=270 src="//music.163.com/outchain/player?type=0&id=1988001584&auto=1&height=270"></embed>

 

四、最後效果：

見博客吧

五、注意事項：

1. 建議只使用一首歌曲，由於確定能夠播放；

2. 若是歌單中某些歌曲沒法播放，則播放列表上的歌曲沒法播放沒法點擊；

3. 若是歌單中的第一首歌就沒法播放，那麼自動播放會中止。建議搞一個歌單專門用於背景音樂。

六、參考：

1. 博客園如何嵌入網易雲音樂播放器 - 薛勤的博客 注：一種無需將iframe更改成embed的方法

2. 網易雲音樂歌單由於版權緣由沒法生成外鏈的解決方法 | 時空鏡像 - LinD Blog

3. 博客園添加背景音樂插件 - 王陸 - 博客園 注：教程中的class對應的CSS樣式來自這篇博客。

4. 博客園背景音樂調用，讓音樂爲你的博文加點料 - rhinoc - 博客園 注：一篇放在公告欄的教程，可是我公告欄有用，就放棄了。

 

4、結束