关于此博客的制作

博客园除了有丰富的模板外,还支持定制CSS,支持添加侧边栏和底部html,在html中可以添加js,除部分特殊的js函数被禁用了外,基本jquery的函数都支持。

博客所用css(用less语法编写的),在后台设置->页面定制CSS代码中添加

  1 @main-color: #efefef;
  2 @top-color: #444;
  3 @hlink-color : hsl(0, 0%, 0%);
  4 @odd-hlink-color : lighten( @hlink-color,30%);
  5 @hlink-hover-color : lighten(@top-color,80%);
  6 @body-font-size : 14px;
  7 @side-bar-width : 242px;
  8 
  9 /* 基础元素开始 */
 10 hr {
 11   margin-top: 20px;
 12   margin-bottom: 20px;
 13   border: 0;
 14   border-top: 1px solid rgba(102, 128, 153, .45);
 15 }
 16 
 17 body {
 18   background: url(https://files.cnblogs.com/files/lvyahui/b28.gif) repeat fixed;
 19   text-shadow: .02em .02em .02em #3c3c3c;
 20   font-size: 14px;
 21   font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 22 }
 23 
 24 /* 基础元素结束 */
 25 
 26 /* 顶级div */
 27 #home {
 28   border-radius: 0 0 8px 8px;
 29   box-shadow: 0 16px 23px rgba(0, 0, 0, .5);
 30 }
 31 
 32 /* 头部 */
 33 #header {
 34   position: relative;
 35   margin-top: 1.5em;
 36   padding-top: 2em;
 37   border-radius: 8px;
 38   background: @top-color;
 39 }
 40 
 41 #navList {
 42   li {
 43     a.menu {
 44       margin: 18px 10px;
 45       text-decoration: none;
 46     }
 47     a.menu:after {
 48       position: absolute;
 49       margin-left: 23px;
 50       padding-top: 4px;
 51       color: #fff;
 52       content: "*";
 53       font-weight: 700;
 54     }
 55     a.menu:link, a.menu:visited, a.menu:active {
 56       text-shadow: 1px 1px 1px lighten(@top-color,30%);
 57     }
 58   }
 59   li:last-child {
 60     a.menu:after {
 61       content: "";
 62     }
 63   }
 64   li:nth-child(odd) {
 65     a.menu {
 66       color: @odd-hlink-color;
 67     }
 68   }
 69   li:nth-child(even) {
 70     a.menu {
 71       color: @hlink-color;
 72     }
 73   }
 74   li:hover {
 75     background-color: @top-color;
 76     a.menu {
 77       color: @hlink-hover-color;
 78     }
 79   }
 80 }
 81 
 82 #navigator {
 83   overflow: hidden;
 84   margin-top: 10px;
 85   height: auto;
 86   background-color: @main-color;
 87   li {
 88     float: left;
 89     overflow: hidden;
 90     color: @main-color;
 91     text-decoration: none;
 92     margin-right: 10px;
 93     margin-left: 10px;
 94     height: 100%;
 95   }
 96 }
 97 
 98 a#Header1_HeaderTitle {
 99   color: #fafafa;
100   text-shadow: 1px 2px 8px #333;
101   letter-spacing: 0;
102 }
103 
104 /* 头部结束 */
105 /* 主体开始 */
106 #main {
107   position: relative;
108   background-color: rgba(255, 255, 255, 1);
109 }
110 
111 #mainContent {
112   background: 0;
113 }
114 
115 #blogTitle h1 {
116   width: 100%;
117   a {
118     display: block;
119     height: 80px;
120     background: url(https://files.cnblogs.com/files/lvyahui/title.gif) no-repeat;
121     text-decoration: none;
122     text-transform: capitalize;
123     text-shadow: 2px 2px 8px #333;
124     font-weight: 400;
125     font-size: 0;
126   }
127   a:hover {
128     text-shadow: 0 0 30px #888;
129     animation: opaAnm 1s;
130     -webkit-animation: opaAnm 1s;
131   }
132 }
133 
134 /* 文章正文开始 */
135 #cnblogs_post_body {
136   p img {
137     max-width: 100% !important;
138   }
139   h2 {
140     text-align: center;
141     font-weight: 700;
142     font-size: 21px;
143   }
144   h2:after {
145     float: right;
146     margin: 0 auto;
147     padding: 5px 0;
148     width: 100%;
149     height: 10px;
150     background: url(https://files.cnblogs.com/files/lvyahui/bookmark-bottom.gif) 50% 50% no-repeat;
151     content: " ";
152   }
153 }
154 .postTitle {
155   padding: 10px 10px;
156   a:active, a:link, a:visited {
157     color: #222;
158   }
159   border-left: 8px solid @main-color;
160 }
161 #topics  h1.postTitle{
162   padding-left:10px;
163 }
164 .postBody {
165   font-size: 14px;
166   blockquote {
167     margin: 0 0 15px;
168     padding: 15px 20px;
169     min-height: initial;
170     border: 0 @main-color;
171     border-left: 8px solid;
172     background-color: rgba(102, 128, 153, .05);
173     font-size: 14px;
174     line-height: normal;
175   }
176 }
177 .cnblogs-markdown code {
178   padding: 2px 4px;
179   border-radius: 4px;
180   background: #f9f2f4 0 0;
181   color: #c7254e;
182   font-size: 90%;
183 }
184 span.cnblogs_code_copy > a:link, span.cnblogs_code_copy > a:link > img {
185   padding: 1px 4px;
186   background: 0 0 !important;
187 }
188 .cnblogs_code {
189   padding: 1px;
190   border-radius: 5px;
191   background-color: #999;
192   pre, span {
193     font-family: Consolas, "DejaVu Sans Mono", "Microsoft Yahei Mono", serif !important;
194   }
195   pre {
196     padding-left: 3px;
197     background-color: #fff;
198   }
199   .code_img_closed, .code_img_opened {
200     padding: 2px 12px;
201   }
202   .cnblogs_code_toolbar {
203     display: none;
204     margin: 0;
205     background-color: #ccc;
206   }
207 }
208 /* 文章正文结束 */
209 
210 
211 .topicListFooter {
212   margin-top: 2em;
213   margin-bottom: 3em;
214 }
215 /* 主体结束 */
216 
217 
218 
219 /* 博文统计信息 */
220 .postDesc {
221   a:active, a:link, a:visited {
222     color: #666;
223   }
224   a:hover {
225     color: @top-color;
226   }
227 }
228 
229 /* 侧边栏开始 */
230 #blog-sidecolumn .catListTitle, .catListArticleArchive h3, .catListComment h3, .catListEssay h3, .catListFeedback h3, .catListImageCategory h3, .catListLink h3, .catListNoteBook h3, .catListPostArchive h3, .catListPostCategory h3, .catListTag h3, .catListView h3, .mySearch h3, .newsItem .catListTitle {
231   border: none;
232   background: 0;
233 }
234 
235 /* 个人信息和公告 */
236 #profile_block {
237   text-align: center;
238 }
239 div#profile_block > a {
240   color: @top-color;
241 }
242 
243 div#p_b_follow > a, input.btn_my_zzk {
244   width: 70px;
245   height: 25px;
246   border: solid 1px #454545;
247   background: #454545;
248   background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#444444));
249   background: -moz-linear-gradient(top, #454545, #444444);
250   color: #faddde;
251   font-weight: 700;
252   font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
253   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#444444');
254 }
255 
256 div#p_b_follow > a:hover, input.btn_my_zzk:hover {
257   background: @top-color;
258   background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#444444));
259   background: -moz-linear-gradient(top, #454545, #444444);
260   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#444444');
261 }
262 /* 关注按钮 */
263 div#p_b_follow > a {
264   float: right;
265   margin-top: 4px;
266   padding: 1px 4px;
267   width: 245px !important;
268   border-radius: 4px;
269   text-decoration: none;
270 }
271 
272 /* 日历 */
273 // 将日历隐藏
274 div#blog-calendar{
275   display: none;
276   table{
277     display: none;
278   }
279 }
280 .CalTodayDay {
281   color: @top-color;
282 }
283 
284 .CalTitle {
285   background: 0;
286 }
287 
288 /* 输入搜索框开始 */
289 div#sidebar_search_box{
290   padding-left:18px;
291 
292 }
293 input.input_my_zzk {
294   width: 100%;
295   height: 32px;
296   border: 0;
297   box-shadow: inset 1px 1px 11px rgba(0, 0, 0, .3);
298   font-size: 16px;
299 }
300 
301 input#google_q, input#q {
302   padding: 3px;
303   width: 168px;
304   outline: 0;
305   border: 1px solid #eee;
306   font-weight: 700;
307   font-size: 12px;
308   font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
309 }
310 
311 input#google_q:focus, input#q:focus {
312   outline-style: none;
313   border-color: #E73434;
314 }
315 /* 输入搜索框结束 */
316 
317 
318 .catListTag > ul, .catListTag > ul > li {
319   float: left;
320   min-height: 22px;
321 }
322 
323 .catListTag {
324   display: inline-block;
325 }
326 
327 #sidebar_categories ul {
328   overflow: hidden;
329   > li {
330     float: left;
331     display: block;
332     width: 40%;
333   }
334 }
335 
336 div.catListLink {
337   height: 80px;
338   ul li {
339     float: left;
340   }
341 }
342 
343 div#sidebar_recentposts{
344   a {
345     width:@side-bar-width;
346     text-overflow: ellipsis;
347     white-space: nowrap;
348     overflow: hidden;
349     display: block;
350   }
351 }
352 /*隐藏常用链接*/
353 div#sidebar_shortcut{
354   display: none;
355 }
356 /* 侧边栏结束 */
357 
358 /* 右侧浮动目录 */
359 div#article-menu {
360   position: fixed;
361   top: 40%;
362   right: 0;
363   z-index: 1000;
364   > ul {
365     border-radius: 5px 0 0 5px;
366     background-color: rgba(255, 255, 255, .65);
367     box-shadow: 0 0 50px rgba(0, 0, 0, .5);
368     > li {
369       display: block;
370       overflow: hidden;
371       padding: 0 30px;
372       width: 100px;
373       text-overflow: ellipsis;
374       white-space: nowrap;
375       line-height: 26px;
376       cursor: pointer;
377     }
378     > li:hover, .current {
379       background-color: rgba(211, 211, 211, .65);
380     }
381     > li:last-child {
382       color: red;
383     }
384   }
385 }
386 
387 /* 左侧浮动按键 */
388 div#info {
389   position: fixed;
390   top: 40%;
391   padding: 3px;
392   width: 30px;
393   background-color: rgba(255, 255, 255, .65);
394   box-shadow: 0 0 50px rgba(0, 0, 0, .5);
395   > .icon {
396     float: right;
397     margin: 5px 7px;
398     > img {
399       width: 20px;
400       height: 20px;
401       border-radius: 3px;
402     }
403   }
404 }
405 
406 /* 浮动点赞 */
407 #div_digg {
408   position: fixed;
409   bottom: 0;
410   left: 0;
411   z-index: 200;
412   margin-left: 15px;
413   padding: 20px;
414   width: 115px;
415   border-radius: 5px;
416   background-color: rgba(255, 255, 255, .65);
417   box-shadow: 0 0 50px rgba(0, 0, 0, .5);
418 }
419 
420 /* 顶部展示代码框 */
421 #code {
422   position: absolute;
423   top: 11px;
424   right: 11px;
425   overflow-y: auto;
426   padding: 5px 15px;
427   width: 300px;
428   height: 115px;
429   outline: 0;
430   border-left: #ADADAD solid 30px;
431   border-radius: 0 8px 8px 0;
432   background: #fff;
433   box-shadow: inset 1px 1px 27px rgba(0, 0, 0, .3);
434   font-family: Consolas, serif;
435   .comments {
436     color: #3f7f5f;
437   }
438   .space {
439     margin-left: 7px;
440   }
441   .keyword {
442     color: #7f0055;
443     font-weight: 700;
444   }
445   .string {
446     color: #2a36ff;
447   }
448   .placeholder {
449     margin-left: 28px;
450   }
451 }
452 
453 /* 底部 */
454 #footer {
455   margin-top: 0;
456   padding-top: 15px;
457   padding-bottom: 15px;
458   border-radius: 0 0 8px 8px;
459   background: @top-color;
460 }
461 
462 /* 动画效果 */
463 
464 @keyframes opaAnm {
465   from {
466     opacity: 1;
467   }
468 
469   to {
470     opacity: .4;
471   }
472 }
473 
474 @-moz-keyframes opaAnm {
475   from {
476     opacity: 1;
477   }
478 
479   to {
480     opacity: .4;
481   }
482 }
483 
484 @-webkit-keyframes opaAnm {
485   from {
486     opacity: 1;
487   }
488 
489   to {
490     opacity: .4;
491   }
492 }
493 
494 @-o-keyframes opaAnm {
495   from {
496     opacity: 1;
497   }
498 
499   to {
500     opacity: .4;
501   }
502 }
503 
504 /* 屏蔽广告 */
505 #ad_c1, #ad_c2, #ad_t2, .c_ad_block, div#google_ad_c1 {
506   display: none;
507 }
508 
509 #site_nav_under, div#google_ad_c2, div#google_ad_c3, div#under_post_kb, div#under_post_news {
510   display: none;
511 }
512 
513 /* 已失效 */
514 .diggit {
515   position: absolute;
516   top: 20px;
517   left: 20px;
518   width: 46px;
519 }
520 .entrylistPosttitle {
521   border-left: 5px solid @top-color;
522 }
523 
524 a#MyLinks1_HomeLink {
525   display: none;
526 }
博客CSS代码

页脚html代码(含javascript代码),在后台设置->页脚Html代码中添加

  1 <audio src='http://sc.111ttt.com/up/mp3/13271/EB90ADBD89F9FB0B477B5412674A9A96.mp3' id="music" loop="loop" preload="none" hidden="hidden"></audio>
  2 <script>
  3     (function(f){f.fn.jrumble=function(g){var a=f.extend({x:2,y:2,rotation:1,speed:15,opacity:false,opacityMin:0.5},g);return this.each(function(){var b=f(this),h=a.x*2,i=a.y*2,k=a.rotation*2,g=a.speed===0?1:a.speed,m=a.opacity,n=a.opacityMin,l,j,o=function(){var e=Math.floor(Math.random()*(h+1))-h/2,a=Math.floor(Math.random()*(i+1))-i/2,c=Math.floor(Math.random()*(k+1))-k/2,d=m?Math.random()+n:1,e=e===0&&h!==0?Math.random()<0.5?1:-1:e,a=a===0&&i!==0?Math.random()<0.5?1:-1:a;b.css("display")==="inline"&&(l=true,b.css("display","inline-block"));b.css({position:"relative",left:e+"px",top:a+"px","-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(Opacity="+d*100+")",filter:"alpha(opacity="+d*100+")","-moz-opacity":d,"-khtml-opacity":d,opacity:d,"-webkit-transform":"rotate("+c+"deg)","-moz-transform":"rotate("+c+"deg)","-ms-transform":"rotate("+c+"deg)","-o-transform":"rotate("+c+"deg)",transform:"rotate("+c+"deg)"})},p={left:0,top:0,"-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)",filter:"alpha(opacity=100)","-moz-opacity":1,"-khtml-opacity":1,opacity:1,"-webkit-transform":"rotate(0deg)","-moz-transform":"rotate(0deg)","-ms-transform":"rotate(0deg)","-o-transform":"rotate(0deg)",transform:"rotate(0deg)"};b.bind({startRumble:function(a){a.stopPropagation();clearInterval(j);j=setInterval(o,g)},stopRumble:function(a){a.stopPropagation();clearInterval(j);l&&b.css("display","inline");b.css(p)}})})}})(jQuery);
  4     $.fn.typewriter=function(){this.each(function(){var d=$(this),c=d.html(),b=0;d.html("");var e=setInterval(function(){var f=c.substr(b,1);if(f=="<"){b=c.indexOf(">",b)+1}else{b++}d.html(c.substring(0,b)+(b&1?"_":""));if(b>=c.length){clearInterval(e)}},100)});return this};
  5 </script>
  6 <script type="text/javascript" src="https://files.cnblogs.com/files/lvyahui/console.min.js"></script>
  7 <script type="text/javascript" src="https://files.cnblogs.com/files/lvyahui/index.js"></script>
  8 <script>
  9     setTimeout(function(){
 10         $('#sideBar a').each(function(){$(this).attr('title',$(this).text())});
 11     },2000);
 12     $('#navList').append('<li><a class="menu" target="_blank" href="http://movesun.com">我的网站</a></li>')
 13             .append('<li><a class="menu" target="_blank" href="http://www.cnblogs.com/lvyahui/p/4009963.html">此博客制作</a></li>');
 14     (function($) {
 15         $('.cnblogs_code').css('padding','1px 1px 1px 1px');
 16         function inView($ele){
 17             return $ele && $ele.offset().top + $ele.height() >= $(window).scrollTop() &&
 18                     $ele.offset().top + $ele.height() < $(window).scrollTop() + document.documentElement.clientHeight
 19         }
 20         $(document).ready(function(){
 21             var cct = $('#code-ct'),
 22                     code = cct.html();
 23             cct.empty();
 24             $('#header').append(code);
 25             var c = $('#code');
 26             c.show();
 27             c.typewriter();
 28             $('pre span').css('background','#fff');
 29 
 30             var $artMenu = $('#article-menu'),
 31                     $h2 = $('#cnblogs_post_body h2'),
 32                     $ul = $('<ul>'),
 33                     $body = $("html,body"),
 34                     $comment = $('#comment_form_container'),
 35                     $comLi = $('<li>'),
 36                     $current = false;
 37             $h2.each(function(){
 38                 var $h2i = $(this),
 39                         $li = $('<li>');
 40                 $li.html($h2i.text()).attr('title',$h2i.text());
 41                 $li.click(function(){
 42                     $body.animate({scrollTop:$h2i.offset().top},600);
 43                 })
 44                 $li.appendTo($ul);
 45                 $(window).scroll(function(){
 46                     if(inView($h2i)){
 47                         if($current != $h2i && !inView($current)){
 48                             $li.addClass('current');$current = $h2i;
 49                         }
 50                     }else{
 51                         if($h2i != $current){
 52                             $li.removeClass('current');
 53                         }
 54                     }
 55                 });
 56             });
 57             if($comment.size()){
 58                 $comLi.html('留言评论').attr('title','留言评论');
 59                 $comLi.click(function(){
 60                     $body.animate({scrollTop:$comment.offset().top},600);
 61                 });
 62                 $comLi.appendTo($ul);
 63             }
 64             $ul.appendTo($artMenu);
 65             $artMenu.css('top',(document.documentElement.clientHeight - $artMenu.height())/2);
 66         });
 67     })($ || jQuery);
 68     (function(){
 69         window.onload = function(){
 70             var musicNode = document.getElementById('music'),
 71                     musicCtrl = document.getElementsByClassName('music-ctrl')[0],
 72                     playCtrl = musicCtrl.children[0],
 73                     resUrl = 'https://files.cnblogs.com/files/lvyahui/',
 74                     playImg = 'play2.ico',
 75                     stopImg = 'stop2.ico',
 76                     paddingImg = 'loading.ico';
 77             if(typeof musicNode.paused !== 'undefined'){
 78 //                musicNode.src = ;
 79                 musicNode.volume = 0.3;
 80                 var lister,
 81                         padding = function () {
 82 
 83                         },
 84                         play = function(){
 85                             musicNode.play();
 86                             if(musicNode.readyState !== 4){
 87                                 playCtrl.src = resUrl + paddingImg;
 88                                 var lister = musicNode.addEventListener('canplaythrough',function(){
 89                                     playCtrl.src = resUrl + stopImg;
 90                                     musicNode.removeEventListener('canplaythrough',lister);
 91                                 },false);
 92                             }
 93                             else{
 94                                 playCtrl.src = resUrl + stopImg;
 95                             }
 96                         },
 97                         pause = function () {
 98                             musicNode.pause();
 99                             playCtrl.src = resUrl + playImg;
100                         };
101                 musicCtrl.onclick = function(){
102                     if(musicNode.paused){
103                         play();
104                     }else{
105                         pause();
106                     }
107                 };
108 
109             }
110         };
111     })();
112 </script>
页脚代码

其他地方也是类似。

另外如果文件没地方存放,可以在后台设置->文件 中上传就可以得到访问地址,如

点击就可以看到文件地址

https://files.cnblogs.com/files/lvyahui/qrcode_for_gh_e0e9b15ea93a_344.gif

 

参考文章

为我的博客园做一个多彩TAG

 

posted @ 2014-05-09 21:22  lvyahui  阅读(545)  评论(1编辑  收藏  举报