文章目录
  1. 1. 分析
  2. 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 的功底就能上手。

实现

实现步骤:

一. 进入自定义设置页面

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

二. 修改样式代码

A. 编辑 CSS 代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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 代码:

1
2
3
4
5
<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="http://ihongqiqu.com/">http://ihongqiqu.com</a>
</div>

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


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

author:Zhenguo
Author: Zhenguo      Blog: http://ihongqiqu.com/     Email: jinzhenguo1990@gmail.com
I have almost 6 years of Android application development experience and have a keen interested in the latest emerging technologies. I use my spare time to turn my experience, ideas and love for Android tech into informative articles, tutorials and more in hope to help others and learn more.
文章目录
  1. 1. 分析
  2. 2. 实现
    1. 2.1. 一. 进入自定义设置页面
    2. 2.2. 二. 修改样式代码
      1. 2.2.1. A. 编辑 CSS 代码
      2. 2.2.2. B. 编辑 DIV 容器
返回顶部