关于此博客的制作

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

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

@main-color: #efefef;
@top-color: #444;
@hlink-color : hsl(0, 0%, 0%);
@odd-hlink-color : lighten( @hlink-color,30%);
@hlink-hover-color : lighten(@top-color,80%);
@body-font-size : 14px;
@side-bar-width : 242px;

/* 基础元素开始 */
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid rgba(102, 128, 153, .45);
}

body {
  background: url(https://files.cnblogs.com/files/lvyahui/b28.gif) repeat fixed;
  text-shadow: .02em .02em .02em #3c3c3c;
  font-size: 14px;
  font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

/* 基础元素结束 */

/* 顶级div */
#home {
  border-radius: 0 0 8px 8px;
  box-shadow: 0 16px 23px rgba(0, 0, 0, .5);
}

/* 头部 */
#header {
  position: relative;
  margin-top: 1.5em;
  padding-top: 2em;
  border-radius: 8px;
  background: @top-color;
}

#navList {
  li {
    a.menu {
      margin: 18px 10px;
      text-decoration: none;
    }
    a.menu:after {
      position: absolute;
      margin-left: 23px;
      padding-top: 4px;
      color: #fff;
      content: "*";
      font-weight: 700;
    }
    a.menu:link, a.menu:visited, a.menu:active {
      text-shadow: 1px 1px 1px lighten(@top-color,30%);
    }
  }
  li:last-child {
    a.menu:after {
      content: "";
    }
  }
  li:nth-child(odd) {
    a.menu {
      color: @odd-hlink-color;
    }
  }
  li:nth-child(even) {
    a.menu {
      color: @hlink-color;
    }
  }
  li:hover {
    background-color: @top-color;
    a.menu {
      color: @hlink-hover-color;
    }
  }
}

#navigator {
  overflow: hidden;
  margin-top: 10px;
  height: auto;
  background-color: @main-color;
  li {
    float: left;
    overflow: hidden;
    color: @main-color;
    text-decoration: none;
    margin-right: 10px;
    margin-left: 10px;
    height: 100%;
  }
}

a#Header1_HeaderTitle {
  color: #fafafa;
  text-shadow: 1px 2px 8px #333;
  letter-spacing: 0;
}

/* 头部结束 */
/* 主体开始 */
#main {
  position: relative;
  background-color: rgba(255, 255, 255, 1);
}

#mainContent {
  background: 0;
}

#blogTitle h1 {
  width: 100%;
  a {
    display: block;
    height: 80px;
    background: url(https://files.cnblogs.com/files/lvyahui/title.gif) no-repeat;
    text-decoration: none;
    text-transform: capitalize;
    text-shadow: 2px 2px 8px #333;
    font-weight: 400;
    font-size: 0;
  }
  a:hover {
    text-shadow: 0 0 30px #888;
    animation: opaAnm 1s;
    -webkit-animation: opaAnm 1s;
  }
}

/* 文章正文开始 */
#cnblogs_post_body {
  p img {
    max-width: 100% !important;
  }
  h2 {
    text-align: center;
    font-weight: 700;
    font-size: 21px;
  }
  h2:after {
    float: right;
    margin: 0 auto;
    padding: 5px 0;
    width: 100%;
    height: 10px;
    background: url(https://files.cnblogs.com/files/lvyahui/bookmark-bottom.gif) 50% 50% no-repeat;
    content: " ";
  }
}
.postTitle {
  padding: 10px 10px;
  a:active, a:link, a:visited {
    color: #222;
  }
  border-left: 8px solid @main-color;
}
#topics  h1.postTitle{
  padding-left:10px;
}
.postBody {
  font-size: 14px;
  blockquote {
    margin: 0 0 15px;
    padding: 15px 20px;
    min-height: initial;
    border: 0 @main-color;
    border-left: 8px solid;
    background-color: rgba(102, 128, 153, .05);
    font-size: 14px;
    line-height: normal;
  }
}
.cnblogs-markdown code {
  padding: 2px 4px;
  border-radius: 4px;
  background: #f9f2f4 0 0;
  color: #c7254e;
  font-size: 90%;
}
span.cnblogs_code_copy > a:link, span.cnblogs_code_copy > a:link > img {
  padding: 1px 4px;
  background: 0 0 !important;
}
.cnblogs_code {
  padding: 1px;
  border-radius: 5px;
  background-color: #999;
  pre, span {
    font-family: Consolas, "DejaVu Sans Mono", "Microsoft Yahei Mono", serif !important;
  }
  pre {
    padding-left: 3px;
    background-color: #fff;
  }
  .code_img_closed, .code_img_opened {
    padding: 2px 12px;
  }
  .cnblogs_code_toolbar {
    display: none;
    margin: 0;
    background-color: #ccc;
  }
}
/* 文章正文结束 */


.topicListFooter {
  margin-top: 2em;
  margin-bottom: 3em;
}
/* 主体结束 */



/* 博文统计信息 */
.postDesc {
  a:active, a:link, a:visited {
    color: #666;
  }
  a:hover {
    color: @top-color;
  }
}

/* 侧边栏开始 */
#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 {
  border: none;
  background: 0;
}

/* 个人信息和公告 */
#profile_block {
  text-align: center;
}
div#profile_block > a {
  color: @top-color;
}

div#p_b_follow > a, input.btn_my_zzk {
  width: 70px;
  height: 25px;
  border: solid 1px #454545;
  background: #454545;
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#444444));
  background: -moz-linear-gradient(top, #454545, #444444);
  color: #faddde;
  font-weight: 700;
  font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#444444');
}

div#p_b_follow > a:hover, input.btn_my_zzk:hover {
  background: @top-color;
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#444444));
  background: -moz-linear-gradient(top, #454545, #444444);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#444444');
}
/* 关注按钮 */
div#p_b_follow > a {
  float: right;
  margin-top: 4px;
  padding: 1px 4px;
  width: 245px !important;
  border-radius: 4px;
  text-decoration: none;
}

/* 日历 */
// 将日历隐藏
div#blog-calendar{
  display: none;
  table{
    display: none;
  }
}
.CalTodayDay {
  color: @top-color;
}

.CalTitle {
  background: 0;
}

/* 输入搜索框开始 */
div#sidebar_search_box{
  padding-left:18px;

}
input.input_my_zzk {
  width: 100%;
  height: 32px;
  border: 0;
  box-shadow: inset 1px 1px 11px rgba(0, 0, 0, .3);
  font-size: 16px;
}

input#google_q, input#q {
  padding: 3px;
  width: 168px;
  outline: 0;
  border: 1px solid #eee;
  font-weight: 700;
  font-size: 12px;
  font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

input#google_q:focus, input#q:focus {
  outline-style: none;
  border-color: #E73434;
}
/* 输入搜索框结束 */


.catListTag > ul, .catListTag > ul > li {
  float: left;
  min-height: 22px;
}

.catListTag {
  display: inline-block;
}

#sidebar_categories ul {
  overflow: hidden;
  > li {
    float: left;
    display: block;
    width: 40%;
  }
}

div.catListLink {
  height: 80px;
  ul li {
    float: left;
  }
}

div#sidebar_recentposts{
  a {
    width:@side-bar-width;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
  }
}
/*隐藏常用链接*/
div#sidebar_shortcut{
  display: none;
}
/* 侧边栏结束 */

/* 右侧浮动目录 */
div#article-menu {
  position: fixed;
  top: 40%;
  right: 0;
  z-index: 1000;
  > ul {
    border-radius: 5px 0 0 5px;
    background-color: rgba(255, 255, 255, .65);
    box-shadow: 0 0 50px rgba(0, 0, 0, .5);
    > li {
      display: block;
      overflow: hidden;
      padding: 0 30px;
      width: 100px;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 26px;
      cursor: pointer;
    }
    > li:hover, .current {
      background-color: rgba(211, 211, 211, .65);
    }
    > li:last-child {
      color: red;
    }
  }
}

/* 左侧浮动按键 */
div#info {
  position: fixed;
  top: 40%;
  padding: 3px;
  width: 30px;
  background-color: rgba(255, 255, 255, .65);
  box-shadow: 0 0 50px rgba(0, 0, 0, .5);
  > .icon {
    float: right;
    margin: 5px 7px;
    > img {
      width: 20px;
      height: 20px;
      border-radius: 3px;
    }
  }
}

/* 浮动点赞 */
#div_digg {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 200;
  margin-left: 15px;
  padding: 20px;
  width: 115px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, .65);
  box-shadow: 0 0 50px rgba(0, 0, 0, .5);
}

/* 顶部展示代码框 */
#code {
  position: absolute;
  top: 11px;
  right: 11px;
  overflow-y: auto;
  padding: 5px 15px;
  width: 300px;
  height: 115px;
  outline: 0;
  border-left: #ADADAD solid 30px;
  border-radius: 0 8px 8px 0;
  background: #fff;
  box-shadow: inset 1px 1px 27px rgba(0, 0, 0, .3);
  font-family: Consolas, serif;
  .comments {
    color: #3f7f5f;
  }
  .space {
    margin-left: 7px;
  }
  .keyword {
    color: #7f0055;
    font-weight: 700;
  }
  .string {
    color: #2a36ff;
  }
  .placeholder {
    margin-left: 28px;
  }
}

/* 底部 */
#footer {
  margin-top: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 0 0 8px 8px;
  background: @top-color;
}

/* 动画效果 */

@keyframes opaAnm {
  from {
    opacity: 1;
  }

  to {
    opacity: .4;
  }
}

@-moz-keyframes opaAnm {
  from {
    opacity: 1;
  }

  to {
    opacity: .4;
  }
}

@-webkit-keyframes opaAnm {
  from {
    opacity: 1;
  }

  to {
    opacity: .4;
  }
}

@-o-keyframes opaAnm {
  from {
    opacity: 1;
  }

  to {
    opacity: .4;
  }
}

/* 屏蔽广告 */
#ad_c1, #ad_c2, #ad_t2, .c_ad_block, div#google_ad_c1 {
  display: none;
}

#site_nav_under, div#google_ad_c2, div#google_ad_c3, div#under_post_kb, div#under_post_news {
  display: none;
}

/* 已失效 */
.diggit {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 46px;
}
.entrylistPosttitle {
  border-left: 5px solid @top-color;
}

a#MyLinks1_HomeLink {
  display: none;
}

页脚html代码（含javascript代码），在后台设置->页脚Html代码中添加

<audio src='http://sc.111ttt.com/up/mp3/13271/EB90ADBD89F9FB0B477B5412674A9A96.mp3' id="music" loop="loop" preload="none" hidden="hidden"></audio>
<script>
    (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);
    $.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};
</script>
<script type="text/javascript" src="https://files.cnblogs.com/files/lvyahui/console.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/lvyahui/index.js"></script>
<script>
    setTimeout(function(){
        $('#sideBar a').each(function(){$(this).attr('title',$(this).text())});
    },2000);
    $('#navList').append('<li><a class="menu" target="_blank" href="http://movesun.com">我的网站</a></li>')
            .append('<li><a class="menu" target="_blank" href="http://www.cnblogs.com/lvyahui/p/4009963.html">此博客制作</a></li>');
    (function($) {
        $('.cnblogs_code').css('padding','1px 1px 1px 1px');
        function inView($ele){
            return $ele && $ele.offset().top + $ele.height() >= $(window).scrollTop() &&
                    $ele.offset().top + $ele.height() < $(window).scrollTop() + document.documentElement.clientHeight
        }
        $(document).ready(function(){
            var cct = $('#code-ct'),
                    code = cct.html();
            cct.empty();
            $('#header').append(code);
            var c = $('#code');
            c.show();
            c.typewriter();
            $('pre span').css('background','#fff');

            var $artMenu = $('#article-menu'),
                    $h2 = $('#cnblogs_post_body h2'),
                    $ul = $('<ul>'),
                    $body = $("html,body"),
                    $comment = $('#comment_form_container'),
                    $comLi = $('<li>'),
                    $current = false;
            $h2.each(function(){
                var $h2i = $(this),
                        $li = $('<li>');
                $li.html($h2i.text()).attr('title',$h2i.text());
                $li.click(function(){
                    $body.animate({scrollTop:$h2i.offset().top},600);
                })
                $li.appendTo($ul);
                $(window).scroll(function(){
                    if(inView($h2i)){
                        if($current != $h2i && !inView($current)){
                            $li.addClass('current');$current = $h2i;
                        }
                    }else{
                        if($h2i != $current){
                            $li.removeClass('current');
                        }
                    }
                });
            });
            if($comment.size()){
                $comLi.html('留言评论').attr('title','留言评论');
                $comLi.click(function(){
                    $body.animate({scrollTop:$comment.offset().top},600);
                });
                $comLi.appendTo($ul);
            }
            $ul.appendTo($artMenu);
            $artMenu.css('top',(document.documentElement.clientHeight - $artMenu.height())/2);
        });
    })($ || jQuery);
    (function(){
        window.onload = function(){
            var musicNode = document.getElementById('music'),
                    musicCtrl = document.getElementsByClassName('music-ctrl')[0],
                    playCtrl = musicCtrl.children[0],
                    resUrl = 'https://files.cnblogs.com/files/lvyahui/',
                    playImg = 'play2.ico',
                    stopImg = 'stop2.ico',
                    paddingImg = 'loading.ico';
            if(typeof musicNode.paused !== 'undefined'){
//                musicNode.src = ;
                musicNode.volume = 0.3;
                var lister,
                        padding = function () {

                        },
                        play = function(){
                            musicNode.play();
                            if(musicNode.readyState !== 4){
                                playCtrl.src = resUrl + paddingImg;
                                var lister = musicNode.addEventListener('canplaythrough',function(){
                                    playCtrl.src = resUrl + stopImg;
                                    musicNode.removeEventListener('canplaythrough',lister);
                                },false);
                            }
                            else{
                                playCtrl.src = resUrl + stopImg;
                            }
                        },
                        pause = function () {
                            musicNode.pause();
                            playCtrl.src = resUrl + playImg;
                        };
                musicCtrl.onclick = function(){
                    if(musicNode.paused){
                        play();
                    }else{
                        pause();
                    }
                };

            }
        };
    })();
</script>

其他地方也是类似。

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

点击就可以看到文件地址

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

 

参考文章

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