【博客园】样式美化+网站统计访问+添加网易云背景音乐

新的美化样式参考：博客园美化教程总结 - zxzhang - 博客园 注：

• 该样式对应的皮肤：SimpleMemory，请记得更换。

• 还有目录生成代码默认是生成h2，h3的，需结合自己的需要替换为h1，h2的。

参考：博客园怎样查看别人使用的模板主题 - 独鸣在彼岸的个人空间 - OSCHINA

---

下面内容是第一次美化，目前已经被替换，之前样式代码备份： 链接：https://pan.baidu.com/s/1ExwtvadNFkIrXG5GVaq_zw 提取码：4w7u

---

 我参考别人的教程，对博客园样式做了修改。后来忽然被原创发消息：说我用了他的网站访问统计... 当时一脸懵逼，还有网站访问统计这种东西...根本没有意识到好么... 然后仔细看了一下参考的源码，修改了两个网站访问统计相关的地方，终于搞定了这个问题。自己也很有收获，了解了网站访问统计相关内容。 终于，从一些可量化的指标了解了自己博客的价值，比如访问量、访问来源、访问最多的博客等。 之前写博客都是自己瞎写，除了别人的回复，从来不知道自己的博客还有什么用。这次，自己的博客有了一个更好的量化指标，很不错。

一、美化参考：

教程：博客园自定义皮肤扁平化设计 - marsggbo - 博客园 https://www.cnblogs.com/marsggbo/p/7464999.html

1.1 样式优点说明：

1. 比较喜欢整体样式；

2. 最主要的：每篇文章都添加了目录，同时有跳转至顶部操作，了解文章结构特别有用；

1.2 我的使用说明：

1. 修改了网站的背景图片；

2. 修改了标题的样式，以及返回顶部的按钮位置，还有一些跳转链接；

3. 修改了访问统计相关源码。

二、网站访问统计相关：

参考原教程。注意修改如下两部分：

1、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>

2、友盟统计：

友盟的访问统计特别好：访问统计、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>

注意：因友盟产品太多，网站访问使用的是如下产品，请注意。

三、博客园添加网易云背景音乐

1、获取歌曲或者歌单外链：

<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>

2、修改外链代码

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、在博客园的后台中添加代码

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>

 

4、最后效果：

见博客吧

5、注意事项：

1. 建议只使用一首歌曲，因为肯定可以播放；

2. 如果歌单中某些歌曲无法播放，则播放列表上的歌曲无法播放无法点击；

3. 如果歌单中的第一首歌就无法播放，那么自动播放会停止。建议搞一个歌单专门用于背景音乐。

6、参考：

1. 博客园如何嵌入网易云音乐播放器 - 薛勤的博客 注：一种无需将iframe更改为embed的方法

2. 网易云音乐歌单因为版权原因无法生成外链的解决方法 | 时空镜像 - LinD Blog

3. 博客园添加背景音乐插件 - 王陸 - 博客园 注：教程中的class对应的CSS样式来自这篇博客。

4. 博客园背景音乐调用，让音乐为你的博文加点料 - rhinoc - 博客园 注：一篇放在公告栏的教程，但是我公告栏有用，就放弃了。

 

四、结束