简单的博客页面客制化

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>&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联系*/
View Code

  技术图片

  博客侧边栏公告(支持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 <!--音乐-->
View Code

  页首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 -->
View Code

  页脚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 -->
View Code

 

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

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

  呈上源码以供分享

 

以上是关于简单的博客页面客制化的主要内容,如果未能解决你的问题,请参考以下文章

客制化键盘Kira96简单介绍以及外壳的更换

Android RRO机制的运用-----google开机向导客制化

Android RRO机制的运用-----google开机向导客制化

python 客制化pandas Dataframe的风格

USB端口客制化方法

Oracle EBS12.2 注册客制化应用