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