简单的博客页面客制化
Posted sutsuharayuki
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的博客页面客制化相关的知识，希望对你有一定的参考价值。
DIY博客的页面
写在前面：
申请了博客第一件事当然是整一个炫酷的界面。
自己水平不够，选了个比较顺眼的皮肤，大部分是套用网上现成的模板完成的。
具体定制的内容：
1.字体的修改
2.版面占比的调整
3.UI细节的修改
4.加入了用户头像 和 一些修饰动图
5.时钟，访问统计，Github conner，天气，Live2d看板娘，分享栏，回到顶部按钮 等小插件
6.图片放大功能
7.3D效果标签云
8.背景图更换
9.背景漂浮线段的动态效果
10.鼠标点击现字的特效
11.QQ联系 和 打赏功能
12.更改了推荐按钮
13.段落标题hover效果
需要先申请JS权限
代码：
标题：
1 <h1 style="text-align:right"><span style="color:#FFFFFF"><strong>YukiRinLL</strong></h1>SutsuharaYuki
子标题：
1 <h2 style="text-align:right"> 2 <span style="color:#FFFFFF"> 3 <strong>我知道,痛苦乃是唯一的高贵,无论人世和地狱都不能将其侵蚀.</strong> 4 <br /> 5 <strong> 为了把我那神秘的冠冕编缀,须将一切时代一切领域征集. 6 </strong> 7 <br /> 8 <strong> 9 <span style="color:#81D7D3"> ——波德莱尔 《恶之花》· 祝福 10 </strong> 11 </strong> 12 </span> 13 </h2>
皮肤：
页面定制CSS代码：
1 /*字体修改*/ 2 body { 3 font-family: ‘Lato‘, "PingFang SC", "Microsoft YaHei", sans-serif; 4 font-size: 14px; 5 line-height: 2; 6 color: #555; 7 } 8 /*博客标题*/ 9 #blogTitle h1 { 10 font-size: 26px; 11 font-weight: bold; 12 line-height: 1.5em; 13 margin-top: 10px; 14 margin-bottom: 20px; 15 text-align: center; 16 17 } 18 19 .headermaintitle { 20 display: inline-block; 21 vertical-align: top; 22 line-height: 36px ！calc; 23 font-size: 26px; 24 font-weight: normal; 25 color:#fff !important; 26 font-family: ‘Lato‘, "PingFang SC", "Microsoft YaHei", sans-serif; 27 } 28 29 #home { 30 opacity: 0.80;/*透明度*/ 31 margin: 0 auto; 32 width: 38.2%;/*原始65*/ 33 min-width: 980px;/*页面顶部的宽度*/ 34 background-color: rgba(245, 245, 245, 0.7); 35 padding: 30px; 36 margin-top: 50px; 37 margin-bottom: 50px; 38 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 39 } 40 body { 41 color: #000; 42 background: url(‘https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg‘)fixed; 43 background-size: cover; 44 background-repeat: no-repeat; 45 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; 46 font-size: 12px; 47 min-height: 101%; 48 } 49 50 51 52 #blogTitle { 53 height: 100px; /*高度*/ 54 clear: both; 55 background-color: rgba(245, 245, 245, 0); 56 } 57 #blogTitle h1 { 58 font-size: 36px; 59 font-weight: bold; 60 line-height: 1.8em;/*原始 1.6em*/ 61 margin-top: 10px;/*原始 15px */ 62 color: #548B54; 63 } 64 #blogTitle h2 { 65 font-weight: normal; 66 font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/ 67 line-height: 1.8; 68 color: #111; 69 font-weight: bold; 70 text-align: right; 71 float: right; 72 } 73 #navigator{ 74 background-color: rgba(33, 160, 139, 0.9); 75 } 76 #navList a:link, #navList a:visited, #navList a:active{ 77 color: #eee; 78 font-size: 18px; 79 font-weight: bold; 80 } 81 .blogStats{ 82 color: #eee; 83 } 84 85 .postTitle { 86 border-left: 8px solid rgba(33, 160, 139, 0.68); 87 margin-left: 10px; 88 margin-bottom: 10px; 89 font-size: 20px; 90 91 clear: both; 92 } 93 .postTitle a:link, .postTitle a:visited, .postTitle a:active { 94 color: #21759b; 95 transition: all 0.4s linear 0s; 96 } 97 .postTitle a:hover { 98 margin-left: 30px; 99 color: #0f3647; 100 text-decoration: none; 101 } 102 103 .postCon { 104 float: right; 105 line-height: 1.5em; 106 width: 100%; 107 clear: both; 108 padding: 10px 0; 109 } 110 111 .day .postTitle a { 112 padding-left: 10px; 113 } 114 .day { 115 background: rgba(255, 255, 255, 0.5); 116 } 117 /*文章附加信息*/ 118 .postDesc { 119 background: url(images/posted_time.png) no-repeat 0 1px; 120 color: #757575; 121 float: left; 122 width: 100%; 123 clear: both; 124 text-align: left; 125 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 126 font-size: 13px; 127 padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/ 128 margin-top: 20px; 129 line-height: 1.8; 130 padding-bottom: 35px; 131 } 132 133 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 134 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 135 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar 136 { 137 background: rgba(255, 255, 255, 0.5); 138 margin-bottom: 35px; 139 word-wrap: break-word; 140 } 141 142 .CalTitle{ 143 background: rgba(255, 255, 255, 0); 144 } 145 .catListTitle{ 146 background-color: rgba(33, 160, 139, 0.9); 147 } 148 149 #topics{ 150 background: rgba(255, 255, 255, 0.5); 151 } 152 153 .c_ad_block{ 154 display: none; 155 } 156 157 #tbCommentBody{ 158 width: 100%; 159 height: 200px; 160 background: rgba(255, 255, 255, 0.5); 161 } 162 163 #q{background: rgba(255, 255, 255, 0);} 164 165 .CalNextPrev{background: rgba(255, 255, 255, 0);} 166 167 .cnblogs_code{ 168 background: rgba(255, 255, 255, 0); 169 } 170 171 .cnblogs_code div{ 172 background: rgba(255, 255, 255, 0); 173 } 174 175 .cnblogs_code_toolbar{ 176 background: rgba(255, 255, 255, 0); 177 } 178 179 .entrylist{ 180 background: rgba(255, 255, 255, 0.5); 181 } 182 183 184 185 /* 看板娘 */ 186 canvas#live2dcanvas { 187 border: 0 !important; 188 position:absolute; bottom:0; right:0; 189 } 190 /* 看板娘 */ 191 192 193 /*宠物pet*/ 194 195 196 /*推荐置顶设置*/ 197 #div_digg{ 198 position:fixed; 199 bottom:5px; 200 width:140px; 201 right:650px; 202 border:2px solid #6FA833; 203 padding:10px; 204 background-color:#fff; 205 border-radius:5px 5px 5px 5px !important; 206 box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 207 } 208 #div_digg:hover { 209 box-shadow:0 0 0 1px #5F5A4B, 2px 2px 10px 2px rgba(10, 10, 0, 0.5); 210 } 211 212 /*段落标题Hover效果设置*/ 213 #cnblogs_post_body 214 { 215 color: black; 216 font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; 217 font-size: 15px; 218 } 219 #cnblogs_post_body h1 { 220 background: #169FE6; 221 border-radius: 4px 4px 4px 4px; 222 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 223 font-size: 23px; 224 font-weight: bold; 225 height: 25px; 226 line-height: 25px; 227 margin: 18px 0 0 0; 228 padding: 5px 0 5px 5px; 229 transition: all 0.8s; 230 } 231 #cnblogs_post_body h2 { 232 background: #169FE6; 233 border-radius: 4px 4px 4px 4px; 234 color: #FFFFFF; 235 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 236 font-size: 20px; 237 font-weight: bold; 238 height: 25px; 239 line-height: 25px; 240 margin: 18px 0 0 0; 241 padding: 5px 0 5px 5px; 242 transition: all 0.8s; 243 } 244 #cnblogs_post_body h3 { 245 background: #6FA833; 246 border-radius: 4px 4px 4px 4px; 247 color: #FFFFFF; 248 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 249 font-size: 18px; 250 font-weight: bold; 251 height: 25px; 252 line-height: 25px; 253 margin: 18px 0 0 0; 254 padding: 5px 0 5px 5px; 255 transition: all 0.8s; 256 } 257 #cnblogs_post_body h4{ 258 background: #A8D08D; 259 border-radius: 4px 4px 4px 4px; 260 color: #FFFFFF; 261 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 262 font-size: 18px; 263 font-weight: bold; 264 height: 25px; 265 line-height: 25px; 266 margin: 18px 0 0 0; 267 padding: 5px 0 5px 5px; 268 transition: all 0.8s; 269 } 270 #cnblogs_post_body h1:hover { 271 transform: rotateX(360deg); 272 background-color: #0066FF; 273 } 274 #cnblogs_post_body h2:hover { 275 transform: rotateX(360deg); 276 background-color: #0066FF; 277 } 278 #cnblogs_post_body h3:hover { 279 transform: rotateX(360deg); 280 } 281 #cnblogs_post_body h4:hover { 282 transform: rotateX(360deg); 283 } 284 285 286 /*QQ联系*/
博客侧边栏公告（支持html代码）（支持JS代码）：
1 <!--时钟插件--> 2 <script type="text/javascript" src="https://blog-static.cnblogs.com/files/ujq3/RoundClock.js"> 3 var dom = document.getElementById(‘clock‘); 4 var ctx = dom.getContext(‘2d‘); 5 var width = ctx.canvas.width; 6 var height = ctx.canvas.height; 7 var r = width / 2; 8 //定义钟盘 9 function drawBackground(){ 10 ctx.save(); 11 ctx.translate(r, r); 12 ctx.beginPath(); 13 ctx.lineWidth = 10; 14 ctx.font =‘18px Arial‘; 15 ctx.textAlign = ‘center‘ 16 ctx.textBaseline = ‘middle‘ 17 ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false); 18 ctx.stroke(); 19 var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; 20 //遍历获取坐标 21 hourNumbers.forEach(function(number, i){ 22 var rad = 2 * Math.PI / 12 * i; 23 var x = Math.cos(rad) * (r - 30); 24 var y = Math.sin(rad) * (r - 30); 25 ctx.fillText(number, x ,y); 26 }) 27 28 //定义刻度 29 for(var i=0;i<60;i++){ 30 var rad = 2 * Math.PI / 60 * i; 31 var x = Math.cos(rad) * (r - 18); 32 var y = Math.sin(rad) * (r - 18); 33 ctx.beginPath(); 34 if(i % 5 == 0){ 35 ctx.arc(x, y, 2, 0, 2 * Math.PI, false); 36 ctx.fillStyle = ‘#000‘; 37 }else{ 38 ctx.arc(x, y, 2, 0, 2 * Math.PI, false); 39 ctx.fillStyle = ‘#ccc‘; 40 } 41 ctx.fill(); 42 } 43 44 } 45 46 //定义时钟 47 function drawHour(hour,minute){ 48 ctx.save(); 49 ctx.beginPath(); 50 var rad = 2 * Math.PI / 12 * hour; 51 var mrad = 2 * Math.PI / 12 / 60 * minute; 52 ctx.rotate(rad + mrad); 53 ctx.lineWidth = 6; 54 ctx.lineCap= ‘round‘; 55 ctx.moveTo(0 ,10); 56 ctx.lineTo(0 ,-r / 2); 57 ctx.stroke(); 58 ctx.restore(); 59 } 60 //定义分钟 61 function drawMinute(minute,second){ 62 ctx.save(); 63 ctx.beginPath(); 64 var rad = 2 * Math.PI / 60 * minute; 65 var srad = 2 * Math.PI / 60 /60 * second; 66 ctx.rotate(rad + srad); 67 ctx.lineWidth = 3; 68 ctx.lineCap= ‘round‘; 69 ctx.moveTo(0 ,10); 70 ctx.lineTo(0 ,-r + 18); 71 ctx.stroke(); 72 ctx.restore(); 73 } 74 //定义秒钟 75 function drawSecond(second){ 76 ctx.save(); 77 ctx.beginPath(); 78 var rad = 2 * Math.PI / 60 * second; 79 ctx.rotate(rad); 80 ctx.lineWidth = 3; 81 ctx.lineCap= ‘round‘; 82 ctx.moveTo(-2 ,20); 83 ctx.lineTo( 2, 20); 84 ctx.lineTo( 1, -r + 18); 85 ctx.lineTo( -1, -r + 18); 86 ctx.fillStyle = ‘#c14543‘; 87 ctx.fill(); 88 ctx.restore(); 89 } 90 //定义钟盘圆点样式 91 function drawDot(){ 92 ctx.beginPath(); 93 ctx.fillStyle = ‘#fff‘; 94 ctx.arc(0, 0, 3, 0, 2 * Math.PI, false); 95 ctx.fill(); 96 } 97 98 //时间函数 99 function draw(){ 100 ctx.clearRect(0, 0, width, height); 101 var now = new Date(); 102 var hour = now.getHours(); 103 var minute = now.getMinutes(); 104 var second = now.getSeconds(); 105 drawBackground(); 106 drawHour(hour,minute); 107 drawMinute(minute,second); 108 drawSecond(second); 109 drawDot(); 110 ctx.restore(); 111 } 112 setInterval(draw, 1000); 113 114 RoundClock.js 115 </script><!-- 圆形时钟 --> 116 <div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvas</canvas><div><!-- 圆形时钟 --> 117 118 119 120 121 122 123 124 125 126 <!--访问统计--> 127 <a href="https://info.flagcounter.com/NOFm"><img src="https://s05.flagcounter.com/countxl/NOFm/bg_FFFFFF/txt_108780/border_000000/columns_2/maxflags_10/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a> 128 129 130 131 <!-- 头像 --> 132 <img src="https://pic.cnblogs.com/avatar/1683480/20190509225808.png"> 133 134 135 136 <!--打赏 Start--> 137 138 <!-- 背景动画 --> 139 <canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas> 140 <script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script> 141 142 <!-- 标签云相关库 --> 143 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 144 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.engine3D.min.js" type="text/javascript" charset="utf-8"></script> 145 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.min.js" type="text/javascript" charset="utf-8"></script> 146 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.min.js" type="text/javascript" charset="utf-8"></script> 147 148 <!--更改推荐按钮--> 149 <style type="text/css"> 150 #div_digg{ 151 position:fixed; 152 bottom:5px; 153 width:140px; 154 right:390px; 155 border:2px solid #6FA833; 156 padding:10px; 157 background-color:#fff; 158 border-radius:5px 5px 5px 5px !important; 159 box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 160 } 161 </style> 162 163 <!--地址栏logo--> 164 <script type="text/javascript" language="javascript"> 165 //Setting ico for cnblogs 166 var linkObject = document.createElement(‘link‘); 167 linkObject.rel = "shortcut icon"; 168 linkObject.href = "https://files.cnblogs.com/files/mrwuzs/favicon.ico"; 169 document.getElementsByTagName("head")[0].appendChild(linkObject); 170 </script> 171 172 173 <!--点击图片放大// 展开代码会触发?--> 174 <!--引用js和css--> 175 <link href="http://files.cnblogs.com/files/Jerrycjc/zoomify.min.css" rel="stylesheet"> 176 <script src="http://files.cnblogs.com/files/Jerrycjc/zoomify.min.js"></script> 177 <!--引用js和css--> 178 <script> 179 $(function(){ 180 $(‘#cnblogs_post_body‘).find(‘img:not([alt="复制代码"])‘).each(function(){ 181 $(this).zoomify(); // Default settings 182 $(this).zoomify({ duration: 1000 }); // 1s duration 183 }) 184 }) 185 </script> 186 187 188 <!--支付打赏/有问题？--> 189 <script> 190 window.tctipConfig = { 191 staticPrefix: "http://static.tctip.com", 192 buttonImageId: 5, 193 buttonTip: "zanzhu", 194 list:{ 195 alipay: { qrimg: "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_%E6%94%B6%E6%AC%BE%E7%A0%81.png"}, //修改1 196 weixin: { qrimg: "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_%E6%94%B6%E6%AC%BE%E7%A0%81.png"}, //修改2 197 } 198 }; 199 </script> 200 <script src="http://static.tctip.com/js/tctip.min.js"></script> 201 202 203 204 205 206 207 208 209 210 211 212 <!--QQ联系设置--> 213 <!DOCTYPE html> 214 <html> 215 <head> 216 <meta charset="utf-8" /> 217 </head> 218 <body> 219 <div id="contackInfo">联系： 220 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=944989026&site=qq&menu=yes"> 221 <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:944989026:41 &r=0.30709030851721764" alt="欢迎与我联系" 222 title="欢迎与我联系"> 223 </a> 224 </div> 225 </html> 226 227 228 229 230 231 232 233 234 <!--回到顶部--> 235 <style> 236 .box{ 237 position:fixed; 238 right:370px; 239 bottom: 430px; 240 height:30px; 241 width: 50px; 242 text-align:center; 243 padding-top:20px; 244 background-color: lightblue; 245 border-radius: 20%; 246 overflow: hidden; 247 } 248 .box:hover:before{ 249 top:50% 250 } 251 .box:hover .box-in{ 252 visibility: hidden; 253 } 254 .box:before{ 255 position: absolute; 256 top: -50%; 257 left: 50%; 258 transform: translate(-50%,-50%); 259 content:‘顶部‘; 260 width: 40px; 261 color:peru; 262 font-weight:bold; 263 264 } 265 .box-in{ 266 visibility: visible; 267 display:inline-block; 268 height:20px; 269 width: 20px; 270 border: 3px solid black; 271 border-color: white transparent transparent white; 272 transform:rotate(45deg); 273 } 274 </style> 275 276 <body style="height:2000px;"> 277 <div id="box" class="box"> 278 <div class="box-in"></div> 279 </div> 280 </body> 281 282 <script> 283 var timer = null; 284 box.onclick = function(){ 285 cancelAnimationFrame(timer); 286 timer = requestAnimationFrame(function fn(){ 287 var oTop = document.body.scrollTop || document.documentElement.scrollTop; 288 if(oTop > 0){ 289 document.body.scrollTop = document.documentElement.scrollTop = oTop - 50; 290 timer = requestAnimationFrame(fn); 291 }else{ 292 cancelAnimationFrame(timer); 293 } 294 }); 295 } 296 </script> 297 298 299 300 301 302 <!-- 3D效果的标签云 --> 303 <script src="http://files.cnblogs.com/justinw/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script> 304 <script src="http://files.cnblogs.com/justinw/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script> 305 <script src="http://files.cnblogs.com/justinw/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script> 306 <script type="text/javascript"> 307 jQuery(document).ready(function() { 308 //注意：这里是用的随笔分类做例子，你自己可以根据你自己情况任意设定。 309 $(".catListPostCategory>ul").wrap("<div class=‘wrap‘ ></div>").parent().css({ ‘width‘: ‘245px‘, ‘height‘: ‘496px‘ }); 310 var options = { "range": [-200, 300], "gravity": -10, "xPos": 0.5, "yPos": 0.5, "gravityVector": [0, 0, 1], "interval": 100, "hoverGravityFactor": 0 }; 311 jQuery("div.wrap").starfieldTagCloud(options); 312 }); 313 </script> 314 315 316 317 318 319 <!--百度分享栏--> 320 <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"YukiRinLL - 博客","bdMini":"2","bdMiniList":["mshare","qzone","tsina","weixin","tqq","tieba","sqq","fbook","twi","copy"],"bdPic":"https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_46c84c10b912c8fcbd61ceaffc039245d7882180.gif","bdStyle":"1","bdSize":"24"},"slide":{"type":"slide","bdImg":"3","bdPos":"left","bdTop":"250"},"image":{"viewList":["qzone","sqq","tqq","tsina","weixin","tieba","fbook","twi","mail","copy","mshare"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","sqq","tqq","tsina","weixin","tieba","fbook","twi","mail","copy","mshare"]}};with(document)0[(getElementsByTagName(‘head‘)[0]||body).appendChild(createElement(‘script‘)).src=‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘+~(-new Date()/36e5)];</script> 321 322 323 324 325 326 327 328 329 330 331 332 333 334 <!--宠物pet--> 335 <!--音乐-->
页首Html代码：
1 <!-- 定时器 --> 2 <script> 3 function customTimer(inpId, fn) { 4 if ($(inpId).length) { 5 fn(); 6 } 7 else { 8 var intervalId = setInterval(function () { 9 if ($(inpId).length) { //如果存在了 10 clearInterval(intervalId); // 则关闭定时器 11 customTimer(inpId, fn); //执行自身 12 } 13 }, 100); 14 } 15 } 16 function generateTagClouds() { 17 $(‘.catListTag>ul‘).wrap(‘<div class=\\‘wrap\\‘ ></div>‘).parent().css({ ‘width‘: ‘240px‘, ‘height‘: ‘240px‘ }); 18 19 var options = { 20 ‘range‘: [-200, 300], 21 ‘gravity‘: -10, 22 ‘xPos‘: 0.5, 23 ‘yPos‘: 0.5, 24 ‘gravityVector‘: [0, 0, 1], 25 ‘interval‘: 100, 26 ‘hoverGravityFactor‘: 0 27 }; 28 29 $(‘div.wrap‘).starfieldTagCloud(options); 30 } 31 $(function () { 32 ... 33 customTimer(‘.catListTag‘, generateTagClouds); 34 ... 35 }); 36 </script> 37 38 39 40 41 <!-- 自定制样式文件以及脚本 --> 42 43 44 <!-- 分享 --> 45 <!-- JiaThis Button BEGIN --> 46 <script type="text/javascript" > 47 var jiathis_config={ 48 siteNum:15, 49 sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy", 50 summary:"", 51 boldNum:6, 52 showClose:true, 53 shortUrl:false, 54 hideMore:false 55 } 56 </script> 57 <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8"></script> 58 <!-- JiaThis Button END -->
页脚Html代码：
1 <script type="text/javascript"> 2 /* 鼠标特效 */ 3 var a_idx = 0; 4 jQuery(document).ready(function($) { 5 $("body").click(function(e) { 6 var a = new Array("朧月","十六夜","花鳥風月","黄昏","花筏","雪月花","花吹雪","秋晴れ","冬枯れ","さようなら"); 7 var $i = $("<span></span>").text(a[a_idx]); 8 a_idx = (a_idx + 1) % a.length; 9 var x = e.pageX, 10 y = e.pageY; 11 $i.css({ 12 "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 13 "top": y - 20, 14 "left": x, 15 "position": "absolute", 16 "font-weight": "bold", 17 "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" 18 }); 19 $("body").append($i); 20 $i.animate({ 21 "top": y - 180, 22 "opacity": 0 23 }, 24 1500, 25 function() { 26 $i.remove(); 27 }); 28 }); 29 }); 30 </script> 31 32 33 <!-- fork github 控件 --> 34 <a href="https://github.com/YukiRinLL" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> 35 36 <!-- 看板娘 --> 37 <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js"></script> 38 <script type="text/javascript"> 39 L2Dwidget.init(); 40 </script> 41 42 43 44 45 <!-- 天气插件 --> 46 <script type="text/javascript"> 47 WIDGET = {FID: ‘9fVgD01DNt‘} 48 </script> 49 <script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script> 50 51 52 53 <!--签名下百度分享栏--> 54 <!-- Baidu Button BEGIN --> 55 <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> 56 <span class="bds_more">分享到：</span> 57 <a class="bds_qzone"></a> 58 <a class="bds_tsina"></a> 59 <a class="bds_tqq"></a> 60 <a class="bds_renren"></a> 61 <a class="bds_t163"></a> 62 <a class="shareCount"></a> 63 </div> 64 <script type="text/javascript" id="bdshare_js" data="type=tools&uid=2883522" ></script> 65 <script type="text/javascript" id="bdshell_js"></script> 66 <script type="text/javascript"> 67 document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) 68 </script> 69 <!-- Baidu Button END -->
部分模板在套用的时候根据自己的情况做了一些改变
后续可能会添加 音乐播放器 之类的新功能
呈上源码以供分享
以上是关于简单的博客页面客制化的主要内容，如果未能解决你的问题，请参考以下文章
Android RRO机制的运用-----google开机向导客制化