博客园的界面设置

Posted 2022-07-28 sun-sean

　　每次看大佬的博客发现他们博客设置的很漂亮，在看看自己的博客，发现自己的博客是那么的惨淡（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