简单的博客页面客制化

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>&nbsp; &nbsp; 为了把我那神秘的冠冕编缀,须将一切时代一切领域征集.
 6 </strong>
 7 <br />
 8 <strong>
 9 <span style="color:#81D7D3">&nbsp; &nbsp; &mdash;&mdash;波德莱尔 《恶之花》&middot; 祝福
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&amp;uin=944989026&amp;site=qq&amp;menu=yes">
221              <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:944989026:41 &amp;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&amp;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 -->

　　部分模板在套用的时候根据自己的情况做了一些改变

　　后续可能会添加 音乐播放器 之类的新功能

　　呈上源码以供分享

原文地址：https://www.cnblogs.com/SutsuharaYuki/p/10927016.html