一、背景
在园子里浪迹有很长一段时间了,里面遇到了很多大神,学习了很多知识,也帮助我解决很多现实工作的问题……非常感谢各位园友们的分享。说来惭愧,在园子这么久,很少发布博文。主要原因是自己有点懒,其他的客观原因也就不说了,每个人都有自己当时的想法。结果现在就有一种“我虽在江湖,但江湖没有我的传说”的尴尬,本着“迟到比不到好”的思想,就想着在这里记录一下自己平凡的学习成长历程,也希望能帮助园友们避免我踩过的坑。
之前在逛园子的时候,就发现有些博主的主题很好看,查找了一些攻略,根据自己的喜好,简单的修改了主题样式以及添加了一些功能。如果你想定制自己的博客,可以跟我一起,需要有css基础。
二. 定制自己的博客
1、准备工作
先在博客主页依次点击“管理”=》“设置”,下面找到“申请JS权限”,等待审核,审核通过之后才能,定制的主题才能成功。同时在博客皮肤那里选择博客园提供的皮肤。我没有像园子里面的大神直接自定义一套css样式,我觉得站在巨人的肩上,一样也可以摘到自己的星星。于是我选择了我觉得合适的皮肤[“SimpleBlue”],每个人的爱好不一样,你可以选择你喜欢的皮肤进行修改,不过下面的一些样式可能需要做一些修改,具体看你想要怎么展示。
自定义主题样式操作,对于你不满意的元素,你可以在该页面按F12调出Debug工具,然后对该元素的css进行修改,调整满意之后,你把修改过的css保存到“页面定制CSS代码”里面。
2、公共样式
下面是我对SimpleBlue皮肤的公共样式做了一些调整,如果你想跟博主一样的定制,可以直接copy到"页面定制CSS代码"里面
1 @font-face {
2 font-family: 'FontAwesome';
3 font-style: normal;
4 font-weight: normal;
5 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');
6 }
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 body {
12 background: #eee;
13 color: #444;
14 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
15 font-size: 14px;
16 text-shadow: 0 0 1px transparent;
17 color:#505050;
18 }
19 @media screen and (max-width: 1260px) {
20 body {
21 margin: 0px;
22 }
23 }
24 @media screen and (max-width: 600px) {
25 body {
26 font-size: 13px;
27 }
28 }
29 h1,h2,h3,h4,h5,h6 {
30 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
31 }
32 h1 {
33 font-size: 1.8em;
34 }
35 h2 {
36 font-size: 1.5em;
37 }
38 h3 {
39 font-size: 1.3em;
40 }
41 a {
42 text-decoration: none;
43 color: #258fb8;
44 }
45 a:hover {
46 text-decoration: underline;
47 }
注意:前往不要勾选“禁用模板默认CSS”。
在“博客侧边栏公告”里面添加上我自己写的js方法
1 <script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/util.js"></script>
3、生成文章目录
在"页面定制CSS代码"里面添加样式
1 /* --目录样式 start-- */
2 #sideCatalog a{
3 font-size:12px;
4 font-weight:normal !important;
5 }
6
7 /* --目录样式 end-- */
在"博客侧边栏公告"里面添加JS引用
1 <!--目录 start-->
2 <script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/catalog.js"></script>
3 <!--目录 end-->
在"页首Html代码"里面添加样式引用
1 <!--目录 start-->
2 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/snailblog/maodian.css">
3 <!--目录 end -->
在"页脚Html代码"里面添加JS引用
1 <script src="https://files.cnblogs.com/files/snailblog/bootstrap.min.js"></script>
保存成功之后,就可以看到如下效果
4、设置滚动条样式
在"页面定制CSS代码"里面添加样式
1
2 /* --好看的滚动条 start-- */
3 ::-webkit-scrollbar{
4 width:10px!important;
5 height:10px!important;
6 -webkit-appearance:none;
7 }
8 ::-webkit-scrollbar-thumb{
9 height:5px;border:1px solid transparent;
10 border-top:none;border-bottom:none;
11 -webkit-border-radius:6px;
12 background-color:rgba(0,0,0,.3);
13 background-clip:padding-box;
14 }
15
16 /* --好看的滚动条 end-- */
5、返回顶部
在"页面定制CSS代码"里面添加样式
1
2 /* --返回顶部 start-- */
3
4 #scrollTop div{
5 left:0;
6 overflow:hidden;
7 position:absolute;
8 top:0;
9 width:149px;
10 margin:0;
11 padding:0
12 }
13 #scrollTop .level-2{
14 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
15 display:none;
16 height:250px;
17 opacity:0;
18 z-index:1
19 }
20 #scrollTop .level-3{
21 background:none repeat scroll 0 0 transparent;
22 cursor:pointer;
23 display:block;
24 height:150px;
25 z-index:2
26 }
27 #scrollTop{
28 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
29 cursor:default;
30 display:block;
31 height:180px;
32 overflow:hidden;
33 position:fixed;
34 right:0;
35 top:90%;
36 width:149px;
37 z-index:11;
38 margin:-125px 0 0;
39 padding:0
40 }
41
42 /* --返回顶部 end-- */
在"页脚Html代码"里面添加下面代码
1 <script src="https://files.cnblogs.com/files/snailblog/jquery-migrate-1.2.1.js"></script>
2 <div id="scrollTop" style="display:none;">
3 <div class="level-2"></div>
4 <div class="level-3"></div>
5 </div>
6 <script src="https://files.cnblogs.com/files/snailblog/scroll2top.js"></script>
7 <script type="text/javascript">
8 UI.global_search();
9 var uvOptions = {};
10 // !important
11 (function() {
12 initScrollTop();
13 })();
14 </script>
点击小火箭,小火箭升天回到顶部
6、点赞按钮
在"页面定制CSS代码"里面添加样式
1
2 /* --点赞按钮 start-- */
3 #div_digg{
4 padding: 5px;
5 border-radius: 5px;
6 position: fixed;
7 right: 320px;
8 bottom: 80px;
9 width:80px;
10 z-index:100;
11 }
12 .diggit{
13 background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
14 width: 60px;
15 height: 60px;
16 }
17 #div_digg .diggnum{
18 position: absolute;
19 bottom: -20px;
20 left: 6px;
21 background: #D0D0D0;
22 padding: 2px 0;
23 display: block;
24 color: #555;
25 font-size: 12px;
26 text-align: center;
27 width: 60px;
28 -moz-border-radius: 4px;
29 -webkit-border-radius: 4px;
30 font-weight: bold;
31 }
32 /* 删除反对按钮,有点邪恶了 */
33 .buryit{
34 display: none;
35 }
36
37 /* --点赞按钮 end-- */
屏蔽掉反对按钮的效果
7、鼠标点击效果
在"博客侧边栏公告"里面添加JS引用
1 <!--鼠标点击样式 start-->
2 <script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/mouseclick.js"></script>
3 <!--鼠标点击样式 end-->
4
8、页面左右布局调整
由于SimpleBlue皮肤左边的侧边栏,右边是内容。我们的工具很多都是在右下角,所以导致了内容的一些覆盖,调整一下页面的左右布局。
在"页面定制CSS代码"里面添加样式
1
2 /* --调整左右布局 start-- */
3 #sideBar{
4 right: 30px;
5 left: auto;
6 top:106px;
7 }
8 #mainContent{
9 margin-left: 30px;
10 margin-right: 325px;
11 margin-top: 30px;
12 }
13
14 div.blogStats{
15 right: 360px;
16 top: 135px;
17 }
18
19 /* --调整左右布局 end-- */
9、添加打赏
在管理后台上传自己的支付宝和微信的收款码。注意需要转化成bmp格式。
在"页首Html代码"里面添加下面代码:
1
2 <script>
3 window.tctipConfig = {
4 staticPrefix: "http://static.tctip.com",
5 buttonImageId: 7,
6 buttonTip: "dashang",
7 list:{
8 alipay: {qrimg: "https://files.cnblogs.com/files/snailblog/alipayqr.bmp"},
9 weixin:{qrimg: "https://files.cnblogs.com/files/snailblog/wechatqr.bmp"},
10 }
11 };
12 </script>
13 <script src="https://files.cnblogs.com/files/snailblog/tctip.min.js"></script>
14 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/snailblog/myRewards.css">
注意:上面alipay后面填自己支付宝收款二维码链接、weixin后面填自己微信收款二维码链接。
10、定制首页文章列表样式
在"页面定制CSS代码"里面添加样式
1
2 /* --文章列表页 start-- */
3 .postTitle, .entrylistPosttitle {
4 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
5 font-size: 1.8em;
6 padding: 20px 20px 15px 0px;
7 background: #fff;
8 border-radius: 10px 10px 0px 0px;
9 white-space: nowrap;
10 overflow: hidden;
11 text-overflow: ellipsis;
12 }
13 .postTitle, .entrylistPosttitle {
14 font-size:14px;
15 padding: 20px 20px 15px 0px;
16 }
17
18 .postTitle {
19 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
20 clear: both;
21 background-color: #FBF9F9;
22 margin-bottom: 8px;
23 padding-top: 10px;
24 padding-bottom: 10px;
25 margin-top: 20px;
26 border-left: 3px solid #209E85;
27 padding-left: 20px;
28 font-size: 20px;
29 border-radius:5px;
30 box-shadow: 5px 5px 5px #ccc;
31 }
32 .postTitle a:hover {
33 text-decoration: none;
34 margin-left: 20px;
35 color: #E00000;
36 }
37 .postTitle a:link,
38 .postTitle a:visited,
39 .postTitle a:active {
40 transition: all 0.4s linear 0s;
41 }
42
43
44 /* --文章列表页 end-- */
11、定制文章内容样式
在"页面定制CSS代码"里面添加样式
1
2 #cnblogs_post_body {
3 text-align: justify;
4 line-height: 1.6;
5 }
6 #cnblogs_post_body p,
7 #cnblogs_post_body blockquote,
8 #cnblogs_post_body ul,
9 #cnblogs_post_body ol,
10 #cnblogs_post_body dl,
11 #cnblogs_post_body table,
12 #cnblogs_post_body iframe,
13 #cnblogs_post_body h2,
14 #cnblogs_post_body h3,
15 #cnblogs_post_body h4,
16 #cnblogs_post_body h5,
17 #cnblogs_post_body .video-container {
18 margin-top: 15px;
19 }
20 #cnblogs_post_body blockquote {
21 border-top: 1px solid #ddd;
22 border-bottom: 1px solid #ddd;
23 font-style: italic;
24 font-family: "Georgia", serif;
25 font-size: 1.2em;
26 padding: 0 30px 15px;
27 }
28 #cnblogs_post_body blockquote footer {
29 border-top: none;
30 font-size: 0.8em;
31 line-height: 1;
32 margin: 20px 0 0;
33 padding-top: 0;
34 }
35 #cnblogs_post_body blockquote footer cite:before {
36 content: '—';
37 color: #ccc;
38 padding: 0 0.5em;
39 }
40 #cnblogs_post_body code,
41 #cnblogs_post_body pre {
42 font-family: Monaco, Menlo, Consolas, Courier New, monospace;
43 }
44 #cnblogs_post_body code {
45 background: #eee;
46 color: #666;
47 padding: 0 5px;
48 margin: 0 2px;
49 font-size: 0.9em;
50 border: 1px solid #ddd;
51 -webkit-border-radius: 3px;
52 border-radius: 3px;
53 }
54 #cnblogs_post_body pre {
55 background: #eee;
56 overflow: auto;
57 padding: 7px 15px;
58 -webkit-border-radius: 2px;
59 border-radius: 2px;
60 }
61 #cnblogs_post_body pre code {
62 background: none;
63 padding: 0;
64 margin: 0;
65 border: none;
66 -webkit-border-radius: 0;
67 border-radius: 0;
68 }
69 #cnblogs_post_body ul ul,
70 #cnblogs_post_body ol ul,
71 #cnblogs_post_body dl ul,
72 #cnblogs_post_body ul ol,
73 #cnblogs_post_body ol ol,
74 #cnblogs_post_body dl ol,
75 #cnblogs_post_body ul dl,
76 #cnblogs_post_body ol dl,
77 #cnblogs_post_body dl dl {
78 margin-top: 0;
79 }
80 #cnblogs_post_body h1 {
81 font-weight: bold;
82 border-bottom: 1px solid #ddd;
83 padding-bottom: 10px;
84 margin-top: 20px;
85 }
86 #cnblogs_post_body h2,
87 #cnblogs_post_body h3,
88 #cnblogs_post_body h4,
89 #cnblogs_post_body h5 {
90 font-weight: normal;
91 background: #eee;
92 border-radius: 6px;
93 color: Red;
94 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
95 min-height: 25px;
96 line-height: 25px;
97 margin: 18px 5px !important;
98 padding: 8px;
99 opacity: 0.8;
100 border: 1px dashed #aaa;
101 }
102 #cnblogs_post_body h4 {
103 padding-left:20px !important;
104 color:Green !important;
105 }
106 .postBody img,
107 .entrylistPostSummary img, .postCon img,
108 .postBody video {
109 max-width: 100%;
110 height: auto;
111 border: none;
112 }
113 #cnblogs_post_body iframe {
114 border: none;
115 }
116 #cnblogs_post_body .caption {
117 display: block;
118 margin-top: 5px;
119 color: #999;
120 position: relative;
121 font-size: 0.9em;
122 padding-left: 25px;
123 }
124 #cnblogs_post_body .caption:before {
125 content: '\f040';
126 position: absolute;
127 font: 1.3em FontAwesome;
128 position: absolute;
129 left: 0;
130 top: 3px;
131 }
132 #cnblogs_post_body .video-container {
133 position: relative;
134 padding-bottom: 56.25%;
135 padding-top: 30px;
136 height: 0;
137 overflow: hidden;
138 }
139 #cnblogs_post_body .video-container iframe,
140 #cnblogs_post_body .video-container object,
141 #cnblogs_post_body .video-container embed {
142 position: absolute;
143 top: 0;
144 left: 0;
145 width: 100%;
146 height: 100%;
147 margin-top: 0;
148 }
149 #cnblogs_post_body .pullquote {
150 float: right;
151 border: none;
152 padding: 0;
153 margin: 1em 0 0.5em 1.5em;
154 text-align: left;
155 width: 45%;
156 font-size: 1.5em;
157 }
158
159
160 #cnblogs_post_body pre {
161 padding: 0;
162 }
163 #cnblogs_post_body th,
164 #cnblogs_post_body td {
165 padding: 0;
166 }
167
168
169
170
171
172
173 #cnblogs_post_body h2:hover,
174 #cnblogs_post_body h3:hover {
175 color: green;
176 font-size: x-large;
177 font-weight: bold;
178 }
179
180
181
182
183
184
185
186
187 #cnblogs_post_body {
188 overflow: hidden;
189 }
190 #cnblogs_post_body ol {
191 padding-left: 40px;
192 }
193 #cnblogs_post_body ul {
194 margin-left: 35px;
195 }
12、设置个性化签名格式
在"页面定制CSS代码"里面添加样式
1
2 /* --设置签名格式 定制css样式 start-- */
3
4 #MySignature{
5 border-top: 2px solid #ccc;
6 padding-top: 20px;
7 }
8
9 /* --设置签名格式 定制css样式 end-- */
在"博客侧边栏公告“里面添加
1
2 <script type="text/javascript">
3 (function() {
4 $("#recommend").click(function(){
5
6 $('.diggit').click();
7
8
9 })
10
11 $("#follow_me_btn").click(function(){
12 follow('6daecedb-b097-46ad-e0ff-08d7188de755');
13 })
14 })();
15
16 </script>
注意:follow('6daecedb-b097-46ad-e0ff-08d7188de755');里面的id修改成自己的guid。
查找方法:未登陆状态打开自己的博客页(如:https://www.cnblogs.com/snailblog),按F12打开Debug工具,选中“加关注”,然后更换成自己的Guid即可。如下图:
然后将博客签名填写如下内容(下面是我的内容,你可以根据自己的情况填写):
1 <div style="font-size: 13px; border: 1px dashed rgb(45, 161, 45); padding: 10px 15px; background-color: rgb(248, 248, 248)">
2 <label style="font-weight: bold">
3 如果您觉得阅读本文对您有帮助,请点一下右下角<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>
4 感谢您花时间阅读此篇文章,如果您觉得看了这篇文章之后心情还比较高兴,可以打赏一下,请博主喝上一杯咖啡,让博主继续码字……<br>
5 本文版权归作者和博客园共有,来源网址:<a href="https://www.cnblogs.com/snailblog" style="color: red; text-decoration: underline" target="_blank">https://www.cnblogs.com/snailblog</a> 欢迎各位转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接
6 </div>
注意,如果推荐和关注的id有更改,记住需要修改"博客侧边栏公告“里对应元素的单击事件。
三、后语
定制化到这里,我觉得页面的效果已经能满足我的要求了。有的功能或许你觉得不喜欢,你也可以添加一些没有的功能,去实现属于你自己的定制化需求。
这里特别感谢下面链接的博主,很多内容都是基于他们的插件来使用的,特别是hafiz的一些样式。
参考链接:
https://www.cnblogs.com/hafiz/p/9276689.html
https://www.cnblogs.com/shwee/p/9060226.html
来源:oschina
链接:https://my.oschina.net/u/4354994/blog/3418505