博客园自定义悬浮容器-爱红旗渠

文章目录

1. 分析
2. 实现
1. 2.1. 一. 进入自定义设置页面
2. 2.2. 二. 修改样式代码
  1. 2.2.1. A. 编辑 CSS 代码
  2. 2.2.2. B. 编辑 DIV 容器

前段时间下班后，在研究博客园的评论功能，无意间发现博客园支持自定义博客的样式。自从有自己的博客，博客园就成了我引流的一个工具博客。为了能够较好的引流，在博客园自己博客的页面上有一个显眼的入口是显得非常重要。而在页面底部悬浮一个小窗口就成了一个不错的选择。故研究在博客园自定义悬浮容器。

分析

博客园的文章页面有推荐和反对功能，这两个功能能让用户留下评价，故在将推荐也反对两个功能的样式也做了浮动调整，实现后的效果如下图：

cnblog_float_continer

线上预览地址: http://www.cnblogs.com/jingle1267/p/4068020.html

实现上图中的效果，其实只是对 UI 的一些调整，有点 DIV + CSS 的功底就能上手。

实现

实现步骤：

一. 进入自定义设置页面

登陆并进入”我的博客”
选择“管理”，之后点击“设置”

二. 修改样式代码

A. 编辑 CSS 代码

在页面中找到“页面定制CSS代码”，并在之后的输入框中输入如下 CSS 代码：

div#blogTitle a{font-size:42px;color:#e1255a;}
div#blogTitle h2 {margin-left:5em;line-height:2;color:#ac4e69;font-size:14px;}

div#navigator{height:60px;}
ul#navList{height:60px;}
ul#navList li a{font-size:16px;}
ul#navList li a:hover{color:red;}
div.blogStats {font-size:14px;color:#9c8d50;}

.cnblogs-markdown code {
    color: #c7254e;
    background-color:#f9f2f4 !important;
    border: none !important;
}
.cnblogs-markdown code.hljs {
    color: #fff;
    background-color:#333 !important;
    font-size: 14px !important;
}
.cnblogs-markdown code span.hljs-built_in, .cnblogs-markdown code span.hljs-tag, .cnblogs-markdown code span.hljs-name {
    color: #f92672;
}
.my-blog-area {
    width: 500px; 
    margin: 0 auto;
    position: relative; 
    bottom: -105px;
    right:360px; 
    z-index:100;
    font-size:14px;
}
.my-blog-area a {
    color: #f90; 
}
#home {
    margin-top: -16px;
}
#cnblogs_post_body a {
    color: #39f;
    text-decoration:none;
}
#cnblogs_post_body a:hover {
    text-decoration:underline;
}
#goTop {
    width: 45px;
    height: 45px;
    display: block;
    position: fixed;
    bottom: 130px;
    right: 45px;
    background: url(http://img2.imgtn.bdimg.com/it/u=1709150814,3981140910&fm=21&gp=0.jpg);
    background-size: 100% 100%;
}
#div_digg {
    position: fixed;
    right: 20px;
    bottom: -10px;
    padding: 25px;
    height: 64px;
    background:#fff4e8;
}
.jarson-blog {
    position: fixed;
    right: 225px;
    height: 74px;
    bottom: -10px;
    padding: 25px 10px;
    background: #fff4e8;
}
.hljs-keyword {
    color:#ae81ff;
}
.hljs-string {
    color: #e6db74 !important;
}

注意不要选择”禁用模板默认CSS”，除非你要自定义整个页面

B. 编辑 DIV 容器

在页面中找到“页脚Html代码”，并在之后的输入框中输入如下 HTML 代码：

<a id="goTop" href="#"></a>
<div class="jarson-blog">
    <p style="margin-bottom: 8px">欢迎访问我的个人博客，效果更佳哟！</p>
    <a style="color: #f90; font-size: 20px;" target="_blank" href="https://94275.cn/">https://94275.cn</a>
</div>

最后点击保存，然后你就能看到右下角的悬浮容器了。其实超级简单。

本文地址 http://94275.cn/2016/10/21/DIY-cnblogs-styles/ 作者为 Zhenguo