博客园的界面设置

心不动则不痛 提交于 2019-11-27 16:38:21

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!