博客园自定义皮肤

一、背景

    在园子里浪迹有很长一段时间了，里面遇到了很多大神，学习了很多知识，也帮助我解决很多现实工作的问题……非常感谢各位园友们的分享。说来惭愧，在园子这么久，很少发布博文。主要原因是自己有点懒，其他的客观原因也就不说了，每个人都有自己当时的想法。结果现在就有一种“我虽在江湖，但江湖没有我的传说”的尴尬，本着“迟到比不到好”的思想，就想着在这里记录一下自己平凡的学习成长历程，也希望能帮助园友们避免我踩过的坑。

   之前在逛园子的时候，就发现有些博主的主题很好看，查找了一些攻略，根据自己的喜好，简单的修改了主题样式以及添加了一些功能。如果你想定制自己的博客，可以跟我一起，需要有css基础。

二. 定制自己的博客

1、准备工作

     先在博客主页依次点击“管理”=》“设置”，下面找到“申请JS权限”，等待审核，审核通过之后才能，定制的主题才能成功。同时在博客皮肤那里选择博客园提供的皮肤。我没有像园子里面的大神直接自定义一套css样式，我觉得站在巨人的肩上，一样也可以摘到自己的星星。于是我选择了我觉得合适的皮肤[“SimpleBlue”]，每个人的爱好不一样，你可以选择你喜欢的皮肤进行修改，不过下面的一些样式可能需要做一些修改，具体看你想要怎么展示。

  自定义主题样式操作，对于你不满意的元素，你可以在该页面按F12调出Debug工具，然后对该元素的css进行修改，调整满意之后，你把修改过的css保存到“页面定制CSS代码”里面。

2、公共样式

下面是我对SimpleBlue皮肤的公共样式做了一些调整，如果你想跟博主一样的定制，可以直接copy到"页面定制CSS代码"里面

@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
}
* {
  margin: 0;
  padding: 0;
}
body {
  background: #eee;
  color: #444;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  text-shadow: 0 0 1px transparent;
  color:#505050;
}
@media screen and (max-width: 1260px) {
  body {
    margin: 0px;
  }
}
@media screen and (max-width: 600px) {
  body {
    font-size: 13px;
  }
}
h1,h2,h3,h4,h5,h6 {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
h1 {
  font-size: 1.8em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.3em;
}
a {
  text-decoration: none;
  color: #258fb8;
}
a:hover {
  text-decoration: underline;
}

注意：前往不要勾选“禁用模板默认CSS”。

在“博客侧边栏公告”里面添加上我自己写的js方法

<script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/util.js"></script>

3、生成文章目录

在"页面定制CSS代码"里面添加样式

/* --目录样式 start-- */
#sideCatalog a{
  font-size:12px;
  font-weight:normal !important;
}

/* --目录样式 end-- */

在"博客侧边栏公告"里面添加JS引用

<!--目录 start-->
<script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/catalog.js"></script>
<!--目录 end-->

在"页首Html代码"里面添加样式引用

<!--目录 start-->
<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/snailblog/maodian.css">
<!--目录 end -->

在"页脚Html代码"里面添加JS引用

<script src="https://files.cnblogs.com/files/snailblog/bootstrap.min.js"></script>

保存成功之后，就可以看到如下效果

4、设置滚动条样式

在"页面定制CSS代码"里面添加样式

/* --好看的滚动条 start-- */
::-webkit-scrollbar{
    10px!important;
    height:10px!important;
    -webkit-appearance:none;
}
::-webkit-scrollbar-thumb{
    height:5px;border:1px solid transparent;
    border-top:none;border-bottom:none;
    -webkit-border-radius:6px;
    background-color:rgba(0,0,0,.3);
    background-clip:padding-box;
}

/* --好看的滚动条 end-- */

5、返回顶部

在"页面定制CSS代码"里面添加样式

/* --返回顶部 start-- */

#scrollTop div{
  left:0;
  overflow:hidden;
  position:absolute;
  top:0;
  width:149px;
  margin:0;
  padding:0
}
#scrollTop .level-2{
  background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
  display:none;
  height:250px;
  opacity:0;
  z-index:1
}
#scrollTop .level-3{
  background:none repeat scroll 0 0 transparent;
  cursor:pointer;
  display:block;
  height:150px;
  z-index:2
}
#scrollTop{
  background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
  cursor:default;
  display:block;
  height:180px;
  overflow:hidden;
  position:fixed;
  right:0;
  top:90%;
  width:149px;
  z-index:11;
  margin:-125px 0 0;
  padding:0
}

/* --返回顶部 end-- */

在"页脚Html代码"里面添加下面代码

<script src="https://files.cnblogs.com/files/snailblog/jquery-migrate-1.2.1.js"></script>
<div id="scrollTop" style="display:none;">
      <div class="level-2"></div>
      <div class="level-3"></div>
</div>
<script src="https://files.cnblogs.com/files/snailblog/scroll2top.js"></script>
<script type="text/javascript">
    UI.global_search();
    var uvOptions = {};
    // !important
    (function() {
        initScrollTop();
    })();
</script>

点击小火箭，小火箭升天回到顶部

6、点赞按钮

在"页面定制CSS代码"里面添加样式

/* --点赞按钮 start-- */
#div_digg{
  padding: 5px;
  border-radius: 5px;
  position: fixed;
  right: 320px;
  bottom: 80px;
  width:80px;
  z-index:100;
}
.diggit{
  background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
  width: 60px;
  height: 60px;
}
#div_digg .diggnum{
  position: absolute;
  bottom: -20px;
  left: 6px;
  background: #D0D0D0;
  padding: 2px 0;
  display: block;
  color: #555;
  font-size: 12px;
  text-align: center;
  width: 60px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-weight: bold;
}
/* 删除反对按钮,有点邪恶了 */
.buryit{
  display: none;
}

/* --点赞按钮 end-- */

屏蔽掉反对按钮的效果

7、鼠标点击效果

在"博客侧边栏公告"里面添加JS引用

<!--鼠标点击样式 start-->
<script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/mouseclick.js"></script>
<!--鼠标点击样式 end-->

8、页面左右布局调整

   由于SimpleBlue皮肤左边的侧边栏，右边是内容。我们的工具很多都是在右下角，所以导致了内容的一些覆盖，调整一下页面的左右布局。

在"页面定制CSS代码"里面添加样式

/* --调整左右布局 start-- */
#sideBar{
    right: 30px;
    left: auto;
    top:106px;
}
#mainContent{
    margin-left: 30px;
    margin-right: 325px;
    margin-top: 30px;
}

div.blogStats{
    right: 360px;
    top: 135px;
}

/* --调整左右布局 end-- */

9、添加打赏

在管理后台上传自己的支付宝和微信的收款码。注意需要转化成bmp格式。

在"页首Html代码"里面添加下面代码：

<script>
    window.tctipConfig = {
      staticPrefix: "http://static.tctip.com",
      buttonImageId: 7,
      buttonTip: "dashang",
      list:{
        alipay: {qrimg: "https://files.cnblogs.com/files/snailblog/alipayqr.bmp"},
        weixin:{qrimg: "https://files.cnblogs.com/files/snailblog/wechatqr.bmp"},
      }
    };
</script>
<script src="https://files.cnblogs.com/files/snailblog/tctip.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/snailblog/myRewards.css">

注意：上面alipay后面填自己支付宝收款二维码链接、weixin后面填自己微信收款二维码链接。

10、定制首页文章列表样式

在"页面定制CSS代码"里面添加样式

/* --文章列表页 start-- */
.postTitle, .entrylistPosttitle {
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.8em;
  padding: 20px 20px 15px 0px;
  background: #fff;
  border-radius: 10px 10px 0px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.postTitle, .entrylistPosttitle {
    font-size:14px;
    padding: 20px 20px 15px 0px;
  }

.postTitle {
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  clear: both;
  background-color: #FBF9F9;
  margin-bottom: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  border-left: 3px solid #209E85;
  padding-left: 20px;
  font-size: 20px;
  border-radius:5px;
  box-shadow: 5px 5px 5px #ccc;
}
.postTitle a:hover {
  text-decoration: none;
  margin-left: 20px;
  color: #E00000;
}
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
  transition: all 0.4s linear 0s;
}


/* --文章列表页 end-- */

11、定制文章内容样式

在"页面定制CSS代码"里面添加样式

#cnblogs_post_body {
  text-align: justify;
  line-height: 1.6;
}
#cnblogs_post_body p,
#cnblogs_post_body blockquote,
#cnblogs_post_body ul,
#cnblogs_post_body ol,
#cnblogs_post_body dl,
#cnblogs_post_body table,
#cnblogs_post_body iframe,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body .video-container {
  margin-top: 15px;
}
#cnblogs_post_body blockquote {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-style: italic;
  font-family: "Georgia", serif;
  font-size: 1.2em;
  padding: 0 30px 15px;
}
#cnblogs_post_body blockquote footer {
  border-top: none;
  font-size: 0.8em;
  line-height: 1;
  margin: 20px 0 0;
  padding-top: 0;
}
#cnblogs_post_body blockquote footer cite:before {
  content: '—';
  color: #ccc;
  padding: 0 0.5em;
}
#cnblogs_post_body code,
#cnblogs_post_body pre {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
#cnblogs_post_body code {
  background: #eee;
  color: #666;
  padding: 0 5px;
  margin: 0 2px;
  font-size: 0.9em;
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
#cnblogs_post_body pre {
  background: #eee;
  overflow: auto;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
#cnblogs_post_body pre code {
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
#cnblogs_post_body ul ul,
#cnblogs_post_body ol ul,
#cnblogs_post_body dl ul,
#cnblogs_post_body ul ol,
#cnblogs_post_body ol ol,
#cnblogs_post_body dl ol,
#cnblogs_post_body ul dl,
#cnblogs_post_body ol dl,
#cnblogs_post_body dl dl {
  margin-top: 0;
}
#cnblogs_post_body h1 {
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-top: 20px;
}
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5 {
  font-weight: normal;
  background: #eee;
  border-radius: 6px;
  color: Red;
  font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
  min-height: 25px;
  line-height: 25px;
  margin: 18px 5px !important;
  padding: 8px;
  opacity: 0.8;
  border: 1px dashed #aaa;
}
#cnblogs_post_body h4 {
  padding-left:20px !important;
  color:Green !important;
}
.postBody img,
.entrylistPostSummary img, .postCon img,
.postBody video {
  max-width: 100%;
  height: auto;
  border: none;
}
#cnblogs_post_body iframe {
  border: none;
}
#cnblogs_post_body .caption {
  display: block;
  margin-top: 5px;
  color: #999;
  position: relative;
  font-size: 0.9em;
  padding-left: 25px;
}
#cnblogs_post_body .caption:before {
  content: 'f040';
  position: absolute;
  font: 1.3em FontAwesome;
  position: absolute;
  left: 0;
  top: 3px;
}
#cnblogs_post_body .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
#cnblogs_post_body .video-container iframe,
#cnblogs_post_body .video-container object,
#cnblogs_post_body .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
#cnblogs_post_body .pullquote {
  float: right;
  border: none;
  padding: 0;
  margin: 1em 0 0.5em 1.5em;
  text-align: left;
  width: 45%;
  font-size: 1.5em;
}


#cnblogs_post_body pre {
  padding: 0;
}
#cnblogs_post_body th,
#cnblogs_post_body td {
  padding: 0;
}






#cnblogs_post_body h2:hover,
#cnblogs_post_body h3:hover {
  color: green;
  font-size: x-large;
  font-weight: bold;
}








#cnblogs_post_body {
  overflow: hidden;
}
#cnblogs_post_body ol {
  padding-left: 40px;
}
#cnblogs_post_body ul {
  margin-left: 35px;
}

12、设置个性化签名格式

在"页面定制CSS代码"里面添加样式

/* --设置签名格式 定制css样式  start-- */

#MySignature{
border-top: 2px solid #ccc;
  padding-top: 20px;
}

/* --设置签名格式 定制css样式 end-- */

在"博客侧边栏公告“里面添加

<script type="text/javascript">
(function() {
       $("#recommend").click(function(){

$('.diggit').click();


})

 $("#follow_me_btn").click(function(){
follow('6daecedb-b097-46ad-e0ff-08d7188de755');
})
    })();

</script>

注意：follow('6daecedb-b097-46ad-e0ff-08d7188de755');里面的id修改成自己的guid。

查找方法：未登陆状态打开自己的博客页(如：https://www.cnblogs.com/snailblog)，按F12打开Debug工具，选中“加关注”，然后更换成自己的Guid即可。如下图：

然后将博客签名填写如下内容（下面是我的内容，你可以根据自己的情况填写）：

<div style="font-size: 13px; border: 1px dashed rgb(45, 161, 45); padding: 10px 15px; background-color: rgb(248, 248, 248)">
<label style="font-weight: bold">
&nbsp;&nbsp;&nbsp;&nbsp;如果您觉得阅读本文对您有帮助，请点一下右下角<a id="recommend" style="font-weight: bold; color: red; font-size: 15px; text-decoration: underline">推荐”</a>按钮，博主在此感谢！另外您也可以选择<a id="follow_me_btn" style="cursor: pointer; color: blue; text-decoration: underline">【<strong>关注我</strong>】</a>，可以很方便找到我！</label><br>
&nbsp;&nbsp;&nbsp;&nbsp;感谢您花时间阅读此篇文章，如果您觉得看了这篇文章之后心情还比较高兴，可以打赏一下，请博主喝上一杯咖啡，让博主继续码字……<br>
&nbsp;&nbsp;&nbsp;&nbsp;本文版权归作者和博客园共有，来源网址：<a href="https://www.cnblogs.com/snailblog" style="color: red; text-decoration: underline" target="_blank">https://www.cnblogs.com/snailblog</a> 欢迎各位转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接
</div>

注意，如果推荐和关注的id有更改，记住需要修改"博客侧边栏公告“里对应元素的单击事件。

三、后语

定制化到这里，我觉得页面的效果已经能满足我的要求了。有的功能或许你觉得不喜欢，你也可以添加一些没有的功能，去实现属于你自己的定制化需求。
这里特别感谢下面链接的博主，很多内容都是基于他们的插件来使用的，特别是hafiz的一些样式。
参考链接：
https://www.cnblogs.com/hafiz/p/9276689.html
https://www.cnblogs.com/shwee/p/9060226.html