正文

如何设置博客园好看的标题样式(代码片段)

jing-tian  jing-tian  2022-12-18  330

关键词：

1.向博客园申请JS权限

我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码，博客园也会在用户邮箱给你发送是否开通js权限的邮件。

2.添加CSS样式

我们在【管理】-->【设置】-->【博客设置】-->【页面定制CSS代码】中粘贴如下面的代码，当然也可以根据自己喜好定制

 1 #cnblogs_post_body
 2 
 3     color: black;      
 4     font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
 5     font-size: 15px;
 6 
 7 #各个等级标题的颜色样式
 8 #cnblogs_post_body h1    
 9     background: #2B6695;
10     border-radius: 6px 6px 6px 6px;
11     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
12     color: #FFFFFF;
13     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
14     font-size: 23px;
15     font-weight: bold;
16     height: 25px;
17     line-height: 25px;
18     margin: 18px 0 !important;
19     padding: 8px 0 5px 5px;
20     text-shadow: 2px 2px 3px #222222;
21 
22 #cnblogs_post_body h2    
23     background: #008eb7;
24     border-radius: 6px 6px 6px 6px;
25     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
26     color: #FFFFFF;
27     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
28     font-size: 20px;
29     font-weight: bold;
30     height: 25px;
31     line-height: 25px;
32     margin: 18px 0 !important;
33     padding: 8px 0 5px 5px;
34     text-shadow: 2px 2px 3px #222222;
35 
36 #cnblogs_post_body h3    
37     background: #399ab2;
38     border-radius: 6px 6px 6px 6px;
39     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
40     color: #FFFFFF;
41     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
42     font-size: 18px;
43     font-weight: bold;
44     height: 25px;
45     line-height: 25px;
46     margin: 18px 0 !important;
47     padding: 8px 0 5px 5px;
48     text-shadow: 2px 2px 3px #222222;
49 
50 #cnblogs_post_body h4
51     background: #2B6600;
52     border-radius: 6px 6px 6px 6px;
53     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
54     color: #FFFFFF;
55     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
56     font-size: 16px;
57     font-weight: bold;
58     height: 24px;
59     line-height: 23px;
60     margin: 12px 0 !important;
61     padding: 5px 0 5px 10px;
62     text-shadow: 2px 2px 3px #222222;
63 
64 #页面中a标签鼠标位置
65 #cnblogs_post_body h2:a
66    color: rgb(235, 235, 235);
67 
68 #cnblogs_post_body h2 a:hover
69    color: rgb(255, 102, 0);
70 
71 #页面中标题位置
72 #cnblogs_post_body h1
73    color: rgb(235, 235, 235);
74 
75 #cnblogs_post_body h1:hover
76    color: rgb(255, 102, 0);
77 
78 #cnblogs_post_body h2
79    color: rgb(235, 235, 235);
80 
81 #cnblogs_post_body h2:hover
82    color: rgb(255, 102, 0);
83 
84 #cnblogs_post_body h3
85    color: rgb(235, 235, 235);
86 
87 #cnblogs_post_body h3:hover
88    color: rgb(255, 102, 0);
89 
90 #cnblogs_post_body h4
91    color: rgb(235, 235, 235);
92 
93 #cnblogs_post_body h4:hover
94    color: rgb(255, 102, 0);
95 
96 
97 博客园[标题样式]

View Code

注：使用时直接添加段落标题*，在写博文的时候不会立即显示在编辑文档器，需保存博文查看效果样式

如何设置博客园好看的标题样式

1.向博客园申请js权限　　我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷... 查看详情

自定义博客园主题样式

...自定义目录以及相关样式功能，感兴趣的可以看下博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色在此基础上再加点捣鼓内容，实现主题样式透明化、增加侧边“分享”模块、标题级别显示设... 查看详情

自定义博客园主题样式(代码片段)

...请目的：后面的添加js特效需要用到我的博客园-->管理设置-->博客园侧边栏公告-->点击申请JS权限编写申请js权限内容例：尊敬的博查看详情

博客园主题样式修改教程(代码片段)

...博客园申请了js代码的权限，申请入口还是在刚刚那个【设置】里：我这里是批准了所以显示支持js代码，你们要想实现这个代码高亮，那就得先申请（希望博客园的管理员别打我—..—）然后复制下面代码到【博客侧边栏... 查看详情

博客园如何设计自己的样式？

博客园如何设计自己的样式？<canvasheight="990"id="c_n9"style="position:fixed;top:0px;left:0px;z-index:-1;opacity:0.1;"... 查看详情

如何快速的自定义博客园背景图片(代码片段)

博客园的主题背景风格基本是简洁朴素风格，毕竟淳朴码农的撸码知识共享圣地不需要花里胡哨，但是作为新一代的撸码青年，我还是忍不住把博客园简单的美化了一下打开https://sm.ms/上传一张你喜欢的图片，这个网站很好使，... 查看详情

博客园自定义样式(代码片段)

...该是一个女生背景，一些星星的悬浮飘扬那么我们怎么来设置博客园的自定义的样式，而不是不个性的默认界面呢？第一步：进入你的首页，打开管理=>设置第二步：我在博客皮肤中选择了SimpleMemory，这个皮肤相对来说要轻快... 查看详情

博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色(代码片段)

阅读目录前提设置目录生成&设置/修改标题背景色设置目录前提注意：　　请先申请开通ＪＳ接口！！　　今天帮朋友设置后台代码，发现怎么都没有效果，看了下忽略了ＪＳ接口；　　因为插入的代码大多有JS... 查看详情

博客园页面美化(代码片段)

...开始决定把自己的博客弄的好看一点。　　关于博客应该如何去美化，我就不讲了，自己去设置里面看的到，之后开启过JS权限之后就可以开始自己的美化了。　关于我为啥要写这篇博客，主要原因是，网上关于博客美化的博客... 查看详情

博客园美化操作(代码片段)

之所以写这篇文章的原因了主要就是博客园的默认样式太单一，而且很多人都在用，就想与众不同一样，不做大多数准备工作想要美化自己的博客园默认界面，首先需要申请js权限步入正题当你的这一步做完之后就可以... 查看详情

博客园-设置底部个性化签名格式(代码片段)

　设置个性化签名格式，修改成自己喜欢的内容，使我们的签名与众不同，把代码贴在“页面定制CSS代码”框中，当然你可以修改代码，改变样式，代码如下：　　页面定制CSS代码：/*设置签名格式定制css样式*/#MySignaturedis... 查看详情

修改博客园模板样式

...步骤：1.寻找自己喜欢的图片，要求图片足够清晰，以免设置背景时不清楚。博客园首页->管理->相册->设置标题（相册名）-&g 查看详情

纯css打造bilibili样式博客主题

前言一直以来，我都在思考如何减少不必要的JS代码，仅通过CSS来实现博客园主题美化。CSS有很多魔法代码，例如:before，iconfont，order，等等，利用好这些技巧，也能实现很好美化效果。这一次带来的是仿制BiliBli制作的纯CSS博客... 查看详情

自定义博客园首页样式(代码片段)

1、来个效果图2、进入博客园后台（设置->添加页首Html代码），将下面的代码复制粘贴保存即可11<scriptsrc="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">22<canvasid="c_n4"width="860"height="958"style="position:fixed;top:0 查看详情

博客园自定义主题样式(代码片段)

...个人blog页面效果时遇到的技巧及方法等。基本流程设定博客皮肤为BluSky定制首页代码：引入外部CSS页顶博主名字及副标题在首页html内输入以下代码可添加博主名到页面顶端，也可添加副标题：<headerclass="main-header"id=&quo... 查看详情

博客园个人界面美化（初入博客园）(代码片段)

...主页样式很美观，大气，哈哈首先，在博客园后台管理的设置里，申请js代码的权限（默认是没有打开的）　　申请的时候一定要有礼貌，有礼貌，有礼貌（申请了三次才通，别着急，慢慢来）在博客侧边栏公告中添加如下代码... 查看详情

博客园的代码高亮

博客园自带的代码样式很难看，以下是如何自己设置代码的高亮。 1.点开HTML编辑。　　2.找到代码位置，大致如下： 3.提炼成以下样式：<preclass=‘{0}‘>内容</pre> 4.博客园已经默认支持SyntaxH... 查看详情

制作博客园目录导航(代码片段)

...客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码，博客园也会在用户邮箱给你发送是否查看详情