博客园美化教程第二篇----极致个性化你的专属博客（为博客添加背景音乐插件，调整页面布局等）...

阅读目录：

　　1. 前言

　　2. 定制自己的博客

• 0. 美化整体效果
• 1. 准备工作
• 2. 添加博客背景音乐插件
  
• 3. 为博客文章内容主体定制漂亮的显示样式
  
• 4. 公告栏日历样式定制
  
• 5. 待续...

　　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. 待续...

三. 后语

　　这篇是前面一篇教程的继续版，后面有一些有意思的美化项，后面再接上，目前就写这几个。

　　还是那句话，这个教程主要面对没有啥这方面的基础，且正好有这个想法和闲心来把自己的博客主页弄一弄，整得方便自己用一点，按个人喜好，如果有大佬看到这篇，觉得不妥，请略过这个就是啦，哈哈。

　　毕竟，博客用来记录平时学习生活啥的，有个方便易用，自己比较喜欢的界面，当然写起东西来心情也会更好一点嘛，希望这点短短的文字对读者有点点帮助，那当然是最好的。

　　毕竟，分享——使人快乐！─=≡Σ(((つ•̀ω•́)つ

 

转载于:https://www.cnblogs.com/shwee/p/9084535.html