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

新的美化样式参考：博客园美化教程总结 - 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、结束