个人博客自定义样式

0 前言

从大二开始写博客，主要为了记录自己学习过程中的问题。尝试使用过CSDN、博客园等公共服务，也用Github pages搭建过自己的博客，但效果都不令人满意。CSDN广告太多，界面乌烟瘴气，而且很多博客内容都是抄袭而来；博客园模板比较单一，而且对Markdown的支持不友好；Github pages很自由，但是搭建以及发布文章比较麻烦。

后来在网上浏览别人的博客园时，才发现原来是可以自己定制博客的，遂写此文。

1 皮肤

皮肤也就是博客的背景，博客园提供了一些模板，可以在管理->设置->博客皮肤中选择。

如果你对于CSS比较熟悉，那完全可以自己写一个网页的样式，然后勾选禁用模板默认CSS。

如果你不熟悉Web开发，可以找一些别人写好的页面定制代码，复制到页面定制CSS代码框中。

  1 /*
  2 Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
  3 */
  4
  5 pre {
  6     /*控制代码不换行*/
  7     white-space: pre;
  8     word-wrap: normal;
  9 }
 10
 11 .cnblogs-markdown .hljs {
 12     display: block;
 13     overflow: auto;
 14     padding: 1.3em 2em !important;
 15     font-size: 16px !important;
 16     background: #272822 !important;
 17     color: #FFF;
 18     max-height: 700px;
 19 }
 20
 21 .hljs,
 22 .hljs-tag,
 23 .hljs-subst {
 24     color: #f8f8f2;
 25 }
 26
 27 .hljs-strong,
 28 .hljs-emphasis {
 29     color: #a8a8a2;
 30 }
 31
 32 .hljs-bullet,
 33 .hljs-quote,
 34 .hljs-number,
 35 .hljs-regexp,
 36 .hljs-literal,
 37 .hljs-link {
 38     color: #ae81ff;
 39 }
 40
 41 .hljs-code,
 42 .hljs-title,
 43 .hljs-section,
 44 .hljs-selector-class {
 45     color: #a6e22e;
 46 }
 47
 48 .hljs-strong {
 49     font-weight: bold;
 50 }
 51
 52 .hljs-emphasis {
 53     font-style: italic;
 54 }
 55
 56 .hljs-keyword,
 57 .hljs-selector-tag,
 58 .hljs-name,
 59 .hljs-attr {
 60     color: #f92672;
 61 }
 62
 63 .hljs-symbol,
 64 .hljs-attribute {
 65     color: #66d9ef;
 66 }
 67
 68 .hljs-params,
 69 .hljs-class .hljs-title {
 70     color: #f8f8f2;
 71 }
 72
 73 .hljs-string,
 74 .hljs-type,
 75 .hljs-built_in,
 76 .hljs-builtin-name,
 77 .hljs-selector-id,
 78 .hljs-selector-attr,
 79 .hljs-selector-pseudo,
 80 .hljs-addition,
 81 .hljs-variable,
 82 .hljs-template-variable {
 83     color: #e6db74;
 84 }
 85
 86 .hljs-comment,
 87 .hljs-deletion,
 88 .hljs-meta {
 89     color: #75715e;
 90 }
 91
 92 /* 黑色主题makedown代码结束 */
 93
 94 /*makedown行间代码样式 */
 95 .cnblogs-markdown code {
 96     color: #c7254e;
 97     border: none !important;
 98     font-size: 1em !important;
 99     background-color: #f9f2f4 !important;
100     font-family: sans-serif !important;
101 }
102
103 /*引言样式*/
104 blockquote {
105     border-left: 5px solid #55895B;
106 }
107
108 blockquote strong {
109     color: red;
110     font-size: 18px;
111 }
112
113 /*博客顶部容器包括标题、副标题、导航栏*/
114 /* 博客标题和副标题 */
115 #blogTitle {
116     overflow: hidden;
117     height: auto;
118     text-align: center;
119 }
120
121 #blogTitle h1 {
122     font-size: 35px;
123     width: 100%;
124     margin-left: 0;
125 }
126
127 #blogTitle h2 {
128     margin-left: 0;
129     width: 100%;
130     font-size: 20px;
131     font-weight: bold;
132     color: #000;
133 }
134
135 /*博客导航栏 */
136 #navList {
137     float: left;
138 }
139
140 #navList li {
141     border: none;
142     font-size: 16px;
143 }
144
145 .blogStats {
146     display: none;
147 }
148
149 /*sideBar博客侧边栏容器*/
150 #sideBar {
151     width: 300px;
152     box-sizing: border-box;
153     margin-left: 30px;
154     padding: 0;
155 }
156
157 .newsItem, .catListComment, .catListEssay, .catListView, .catListFeedback,
158 #blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {
159     border-radius: 10px;
160     box-shadow: 1px 2px 3px #A7A8AD;
161     background-color: #fff;
162 }
163
164 #sideBarMain h3, .newsItem h3 {
165     font-size: 1.2em;
166     height: 50px;
167     line-height: 50px;
168     text-indent: 0.5em;
169     background: url(http://www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
170     padding: 0 0 0 50px;
171     margin-bottom: 0;
172     border: 1px solid #55895B;
173     border-left-width: 5px;
174     border-radius: 10px;
175     border-right-width: 5px;
176 }
177
178 #sideBarMain ul {
179     background-color: #fff;
180     padding: 15px 20px;
181     border-bottom-left-radius: 10px;
182     border-bottom-right-radius: 10px;
183 }
184
185 #sideBarMain li {
186     line-height: 40px;
187     border-bottom: 1px solid #ddd;
188     font-size: 14px;
189 }
190
191 /*侧边栏公告*/
192 #blog-news > img {
193     /*头像*/
194     display: block;
195     margin: auto;
196     border-radius: 50%;
197 }
198
199 #profile_block {
200     font-size: 15px;
201     padding: 30px;
202     line-height: 1.8;
203 }
204
205 #profile_block > a:link {
206     color: #F60;
207 }
208
209 /*公告结束*/
210
211
212 /* 日历 */
213 #blog-calendar, #calendar {
214     width: 300px;
215 }
216
217 #blog-calendar td {
218     padding: 5px 3px;
219     font-size: 14px;
220 }
221
222 #blog-calendar td a {
223     font-weight: bold;
224     color: #59a020;
225 }
226
227 #blog-calendar table a:hover {
228     color: #59a020;
229     text-decoration: underline;
230     background: transparent;
231 }
232
233 #blog-calendar table u {
234     text-decoration: none;
235 }
236
237 /*日历结束*/
238
239 /*设置背景色和字体大小*/
240
241 body {
242     font-size: 15px;
243     box-sizing: border-box;
244 }
245
246 /*mainContent主体内容容器*/
247 #main {
248     display: flex;
249     width: 95%;
250 }
251
252 #mainContent .forFlow {
253     margin: 0 0 0 310px;
254 }
255
256 #mainContent {
257     margin: 0 0 0 -310px;
258 }
259
260 #post_detail {
261     overflow: hidden;
262 }
263
264 /* 标题title样式 */
265
266 #topics .postTitle {
267     font-size: 25px;
268     padding: 0 40px;
269     border: none;
270     box-sizing: border-box;
271 }
272
273 #cb_post_title_url {
274     border: 1px solid #55895B;
275     border-left-width: 5px;
276     border-radius: 10px;
277     border-right-width: 5px;
278     background-position: left center;
279     padding: 15px 50px;
280     width: 100%;
281     display: inline-block;
282     box-sizing: border-box;
283 }
284
285 /* 主体内容样式 */
286 .postBody {
287     padding: 20px 40px;
288 }
289
290 #cnblogs_post_body {
291     font-size: 15px;
292 }
293
294 #cnblogs_post_body h2 {
295     /*标题h2*/
296     border-left: 5px solid #55895B;
297     padding: 10px 20px;
298     line-height: 2;
299     background: #d6dbdf8a;
300     margin: 30px 0;
301     font-size: 25px;
302 }
303
304 #cnblogs_post_body h3 {
305     margin: 20px 0;
306     padding: 10px 20px;
307     border-left: 5px solid #55895B;
308     font-size: 20px;
309 }
310
311 #cnblogs_post_body h4{
312     font-size: 18px;
313     margin: 20px 0;
314 }
315
316 #topics .postDesc {
317     display: none;
318 }
319
320 /* 个性签名 */
321 #MySignature {
322     box-shadow: 8px 1px 10px #989898;
323     padding: 10px;
324     text-shadow: 1px 1px 1px #FFF;
325     font-size: 17px;
326     border-left: solid 5px #55895B;
327     background: #F3F3F3;
328     border-radius: 10px 10px 50% 10px;
329     line-height: 2.4;
330     margin: 40px 0;
331 }
332
333 #MySignature a {
334     text-decoration: none;
335     color: #4183c4;
336     font-weight: bold;
337 }
338
339 #MySignature a:hover {
340     text-decoration: underline;
341     color: #f60;
342 }
343
344 #MySignature span {
345     color: #f60;
346 }
347
348 /* 关注收藏等几个按钮 */
349 #green_channel {
350     padding: 10px;
351     margin: 20px 0;
352     font-size: 15px;
353     width: 400px;
354 }
355
356 #green_channel a {
357     border-radius: 3px;
358     text-shadow: none;
359     font-weight: normal;
360     box-shadow: none;
361 }
362
363 /* 禁用下划线 */
364 .postBody a:link, .postBody a:visited, .postBody a:active {
365     text-decoration: none;
366 }
367
368 /* 上一篇下一篇 */
369 #post_next_prev {
370     font-size: 14px;
371     color: #535353;
372 }
373
374 /*底部隐藏作者，隐藏推荐和反对*/
375 #author_profile {
376     display: none;
377 }
378
379 #div_digg {
380     display: none;
381 }
382
383 /*隐藏广告*/
384 #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
385     display: none;
386 }
387
388 /*评论*/
389 /*评论列表*/
390 #blog-comments-placeholder {
391     border-radius: 10px;
392     background: #fff;
393     padding: 30px 40px;
394 }
395
396 .feedback_area_title {
397     background: url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
398     border: 1px solid #55895B;
399     border-left-width: 5px;
400     border-radius: 10px;
401     border-right-width: 5px;
402     padding: 15px 50px;
403 }
404
405 /*侧边评论*/
406 li.recent_comment_body {
407     line-height: 30px;
408 }
409
410 /* 提交评论按钮 */
411 #btn_comment_submit {
412     border: solid 1px #fd6d0dd1 !important;
413     width: 90px;
414     height: 40px;
415     color: #fff !important;
416     background-color: #fd6d0dd1 !important;
417     border-radius: 5px;
418     font-size: 16px;
419     cursor: pointer;
420 }

2 标题和导航栏

标题和子标题的修改也在管理->设置中；

导航栏的控件在管理->选项中勾选，这里还包含侧边栏的控件，可以根据需要自行选择。

3 侧边栏公告

这部分的修改也在管理->设置中，不过修改前需要发邮件给博客园后台申请JS权限。

这里主要有3点：

一、动态时钟

这个我是copy了详谈如何定制自己的博客园皮肤 - 静默虚空 - 博客园；

二、背景音乐

背景音乐的添加需要进入网易云音乐网页后，找到喜欢的音乐，生成外链播放器，然后复制那段HTML代码到侧边栏公告即可。

这里要注意：博客园不支持iframe插件，所以只能采用flash插件！

三、访客统计

这个功能可以去http://www.flagcounter.com/完成，同样复制HTML代码到侧边栏公告即可。我的博客把这个放到了页脚html代码中，所以可以看到这个在左下角显示。

完整的博客侧边栏公告代码，注意：其中的网易云音乐和访问人数需要自己生成外链！

 1 <!---  自定义侧边栏  --->
 2  <div class="mySideBar">
 3      <p id="p_b_follow"><a href="javascript:void(0);" onclick="follow(‘ca5022e9-4171-4a38-e168-08d4ef52ecb5‘)">+Follow Me</a></p>
 4      <p>[email protected]</p>
 5      <p>Email：[email protected]</p>
 6  </div>
 7
 8  <!--- 动态时钟  --->
 9 <embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
10
11  <!--- 网易云音乐  --->
12 <embed src="//music.163.com/style/swf/widget.swf?sid=26511658&type=2&auto=1&width=320&height=66" width="340" height="86"  allowNetworking="all"></embed>
13
14 <!--- 访问人数  --->
15 <a href="https://info.flagcounter.com/myYT"><img src="https://s01.flagcounter.com/count2/myYT/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_4/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
16
17  <!--- 导入js库  --->
18  <script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
19  <canvas id="c_n4" width="860" height="968" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>

最后点击保存即可。

原文地址：https://www.cnblogs.com/EIMadrigal/p/11408975.html

时间： 2024-11-01 12:09:11

个人博客自定义样式的相关文章

测试博客园样式

测试博客园样式 博客园是面向开发者的知识分享社区,不允许发布任何推广.广告.政治方面的内容.博客园首页(即网站首页)只能发布原创的.高质量的.能让读者从中学到东西的内容. 测试博客园样式 博客园是面向开发者的知识分享社区,不允许发布任何推广.广告.政治方面的内容. 博客园首页(即网站首页)只能发布原创的.高质量的.能让读者从中学到东西的内容. 测试博客园样式 博客园是面向开发者的知识分享社区,不允许发布任何推广.广告.政治方面的内容. 博客园首页(即网站首页)只能发布原创的.高质量的.能让读者从

博客园样式美化 II

前言 感谢大家对之前 博客园样式美化 的认可,我终于更新啦啦啦啦 更新内容 01 | 优化首页显示效果 优化前: 优化后: 有没有感觉瞬间立体起来了呢- 02 | 增加管理入口 这个很简单,就是导航条上加了个管理的入口 原本想设置为只有博主本人打开页面才能看到,后面发现只能判定有没有登录,不知道是不是博主本人,遂弃之- 03 | 可配置 这个大概是最重要的更新了吧... 将散落在各处的零散的和个人相关的链接,集中在一起,能自动获取的获取(如博主名称),不能自动获取的在页尾的js配置,达到开箱即用

自定义博客园样式

相必每个在博客园开通博客的人都抱怨博客园的皮肤丑得要死,尤其是我这种类处女座的孩子根本把持不住所以我遍鼓敲着美化(老板,我有1WQB,给我美美脸~~) 其实发现博客园里面有个自定义CSS样式,你可以加样式思路就是你选定一个预选皮肤,博客园会给你固定的html结构然后你根据结构来自己添加css,尤其在现在CSS3的年代,你可以把你的博客变得妈都不认得fighting! 1,预选皮肤选择LessIsMore(大多数人用这个皮肤来做自定义)2,然后在页面定制里加入如下代码(only示例,最美的还是你自

博客园样式自定义（待更新）

总感觉这件事情做的晚了哈哈. 以前写博客总是一个人默默地写,现在竟然出现了两个吐槽我挖坑不填的哈哈.(非常感谢~) 大概是终于有个人能够督促自己学习了,你们怎么不早点来?!!! 废话不多说,怎么定义博客园的代码呢. 步骤一,屏蔽掉博客园的皮肤样式 => 百度一下,你就知道 => 其实就是编辑里面 打个勾? 步骤二,如果你要修改JS => 在编辑的地方申请一下 => 一般都会马上批准的. 步骤三, 开工了. 当前要改进的还有很多,比如我觉得 编辑这东西就该放在右上角. 1.编辑栏要放

自定义你的博客园样式

在自己的博客管理 后台里面 有页面定制CSS代码 貌似不同的模板对应的HTML也不同 这是我暂时的代码  挺丑的 @charset 'UTF8'; html,body{ font-family: "verdana","Arial","微软雅黑", "Helvetica", "sans-serif"; box-shadow: 2px 2px 1px #888888; } body{ background-co

博客园样式（收藏）

http://www.cnblogs.com/asxinyu/tag/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%A0%B7%E5%BC%8F/ 为博客园添加目录的配置总结 JavaScript自动生成博文目录导航 共享一下我的博客皮肤 博客园页面设置 博客园里设置个性标题 通过自定义样式优化博客界面

博客园博客css样式一

样式一      1.页面定制css代码 博客背景可以在body{}中添加background:#205424 url('http://mat1.gtimg.com/www/mb/theme/qqfs/one_lhj/wrapBg.jpg') no-repeat top center fixed; 1 <style type="text/css"> 2 .Abstract 3 { 4 padding: 15px; 5 border: dotted 2px #999; 6 c

博客园博客css样式二

样式二    1.页面定制css代码 博客背景可以在body{}中修改background:#205424 url('http://mat1.gtimg.com/www/mb/theme/qqfs/one_lhj/wrapBg.jpg') no-repeat top center fixed;   1 /*公用*/ 2 body { 3 font-size:15px; 4 padding:0; 5 margin:0; 6 font-family:"微软雅黑","宋体"

博客自定义

h3{color: #fff;background-color: #008eb7;-moz-border-radius: 3px;border-radius: 3px;padding:3px;margin:10px 0px;text-shadow:2px 2px 3px #404040;} 博客 贴代码样式方法