每次看大佬的博客发现他们博客设置的很漂亮，在看看自己的博客，发现自己的博客是那么的惨淡（qwq）。
今天搞了一天，终于把自己的博客设置的稍微好看了一点。
1.公告栏如何显示自己的图片：
首先打开个人主页，然后右键自己的图片，点击检查，找到跟“<img src="//pic.cnblogs.com/avatar/1771497/20190817121652.png" alt="Sun_Sean的头像" class="img_avatar">”类似的东西，在把它直接加入到“博客侧边栏公告”（进入博客-设置）
2.如何设置背景：
在“页面定制CSS代码”，加入CSS码，如下：
1 /*simplememory*/
2 #google_ad_c1, #google_ad_c2 {display:none;}
3 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td,
4 .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption,
5 .syntaxhighlighter textarea {
6 font-size: 14px!important;
7 }
8 #home {
9 opacity: 0.80;
10 margin: 0 auto;
11 width: 85%;
12 min-width: 950px;
13 background-color: #fff;
14 padding: 30px;
15 margin-top: 30px;
16 margin-bottom: 50px;
17 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
18 }
19 #blogTitle h1 {
20 font-size: 30px;
21 font-weight: bold;
22 font-family: "Comic Sans MS";
23 line-height: 1.5em;
24 margin-top: 20px;
25 color: #515151;
26 }
27 #navList a:hover {
28 color: #4C9ED9;
29 text-decoration: none;
30 }
31 #navList a {
32 display: block;
33 width: 5em;
34 height: 22px;
35 float: left;
36 text-align: center;
37 padding-top: 18px;
38 }
39 #navigator {
40 font-size: 15px;
41 border-bottom: 1px solid #ededed;
42 border-top: 1px solid #ededed;
43 height: 50px;
44 clear: both;
45 margin-top: 25px;
46 }
47 .catListTitle {
48 margin-top: 21px;
49 margin-bottom: 10.5px;
50 text-align: left;
51 border-left: 10px solid rgba(82, 168, 236, 0.8);
52 padding: 10px 0 14px 10px;
53 background-color: #f5f5f5;
54 }
55 #ad_under_post_holder #google_ad_c1,#google_ad_c2{
56 display: none !important;
57 }
58 body {
59 color: #000;
60 background: url(https://acg.toubiec.cn/random
61
62 ) fixed;
63 background-size: 100%;
64 background-repeat: no-repeat;
65 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
66 font-size: 12px;
67 min-height: 101%;
68 }
69 #topics .postTitle {
70 border: 0px;
71 font-size: 200%;
72 font-weight: bold;
73 float: left;
74 line-height: 1.5;
75 width: 100%;
76 padding-left: 5px;
77 }
78
79 div.commentform p{
80 margin-bottom:10px;
81 }
82 .comment_btn {
83 padding: 5px 10px;
84 height: 35px;
85 width: 90px;
86 border: 0 none;
87 border-radius: 5px;
88 background: #ddd;
89 color: #999;
90 cursor:pointer;
91 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
92 text-shadow: 0 0 1px #fff;
93 display: inline !important;
94 }
95 .comment_btn:hover{
96 padding: 5px 10px;
97 height: 35px;
98 width: 90px;
99 border: 0 none;
100 border-radius: 5px;
101 background: #258fb8;
102 color: white;
103 cursor:pointer;
104 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
105 text-shadow: 0 0 1px #fff;
106 display: inline !important;
107 }
108 #commentform_title {
109 background-image:none;
110 background-repeat:no-repeat;
111 margin-bottom:10px;
112 padding:0;
113 font-size:24px;
114 }
115 #commentbox_opt,#commentbox_opt + p {
116 text-align:center;
117 }
118 .commentbox_title {
119 width: 100%;
120 }
121 #tbCommentBody {
122 font-family:‘Microsoft Yahei‘, Microsoft Yahei, 宋体, sans-serif;
123 margin-top:10px;
124 max-width:100%;
125 min-width:100%;
126 background:white;
127 color:#333;
128 border:2px solid #fff;
129 box-shadow:inset 0 0 8px #aaa;
130 // padding:10px;
131 height:250px;
132 font-size:14px;
133 min-height:120px;
134 }
135 .feedbackItem {
136 font-size:14px;
137 line-height:24px;
138 margin:10px 0;
139 padding:20px;
140 background:#F2F2F2;
141 box-shadow:0 0 5px #aaa;
142 }
143 .feedbackListSubtitle {
144 font-weight:normal;
145 }
146
147 #blog-comments-placeholder, #comment_form {
148 padding: 20px;
149 background: #fff;
150 -webkit-box-shadow: 1px 2px 3px #ddd;
151 box-shadow: 1px 2px 3px #ddd;
152 margin-bottom: 50px;
153 }
154 .feedback_area_title {
155 margin-bottom: 15px;
156 font-size: 1.8em;
157 }
158 .feedbackItem {
159 border-bottom: 1px solid #CCC;
160 margin-bottom: 10px;
161 padding: 5px;
162 background: rgb(248, 248, 248);
163 }
164 .color_shine {background: rgb(226, 242, 255);}
165 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
166 #comment_form .title {
167 font-weight: normal;
168 margin-bottom: 15px;
169 }
黑色加粗的网址就是背景图片（图片必须上传），我的是一个二次元随机图片。
3.如何加入板娘：
直接在“博客侧边栏公告”中加入，如下代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>Live2D</title> 6 7 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css"/> 8 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 9 </head> 10 <body> 11 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css"> 12 <div class="waifu" id="waifu"> 13 <div class="waifu-tips" style="opacity: 1;"></div> 14 <canvas id="live2d" width="280" height="250" class="live2d"></canvas> 15 <div class="waifu-tool"> 16 <span class="fui-home"></span> 17 <span class="fui-chat"></span> 18 <span class="fui-eye"></span> 19 <span class="fui-user"></span> 20 <span class="fui-photo"></span> 21 <span class="fui-info-circle"></span> 22 <span class="fui-cross"></span> 23 </div> 24 </div> 25 <script src="https://files.cnblogs.com/files/kousak/live2d.js"></script> 26 <script src="https://files.cnblogs.com/files/kousak/waifu-tips.js"></script> 27 <script type="text/javascript">initModel()</script> 28 </body> 29 </html> 30 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
给一个大佬链接：https://www.cnblogs.com/kousak/p/9726514.html
原文地址：https://www.cnblogs.com/Sun-Sean/p/11370449.html
时间： 2024-10-11 03:33:39