ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ
─=≡Σ(((つ•̀ω•́)つBuilding Blog（个性化博客）1
─=≡Σ(((つ•̀ω•́)つBuilding Blog（个性化博客）2
目录
【Building Blog】4.Cool Headlines（炫酷标题）
【Building Blog】5.Back To Top（返回顶部按钮）
【Building Blog】6.Back To Bottom（返回底部按钮）
【Building Blog】7.Rolling Announce（滚动公告）
【Building Blog】8.Github?（Github快捷路径）
【Building Blog】9.Special Recommendations（悬浮推荐栏+反对消失）
1.看板娘
页脚Html代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>Live2D</title> 6 7 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/anbujingying/waifu.css"/> 8 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 9 </head> 10 <body> 11 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/anbujingying/waifu.css"> 12 <div class="waifu" id="waifu"> 13 <div class="waifu-tips" style="opacity: 1;"></div> 14 <canvas id="live2d" width="280" height="250" class="live2d"></canvas> 15 <div class="waifu-tool"> 16 <span class="fui-home"></span> 17 <span class="fui-chat"></span> 18 <span class="fui-eye"></span> 19 <span class="fui-user"></span> 20 <span class="fui-photo"></span> 21 <span class="fui-info-circle"></span> 22 <span class="fui-cross"></span> 23 </div> 24 </div> 25 <script src="https://files.cnblogs.com/files/anbujingying/live2d.js"></script> 26 <script src="https://files.cnblogs.com/files/anbujingying/waifu-tips.js"></script> 27 <script type="text/javascript">initModel()</script> 28 </body> 29 </html> 30 <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/anbujingying/flat-ui.min.css"/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
2.去广告
页面定制CSS代码:
#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb { display:none; !important }
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
3.公告栏时钟
页面定制CSS代码：（时钟居中）
.clockdiv{ text-align: center; }
博客侧边栏公告：
<div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvas</canvas><div> <script type="text/javascript" src="https://files.cnblogs.com/files/anbujingying/clock.js"></script>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
4.炫酷标题
页面定制CSS代码：
#Header1_HeaderTitle { text-align: center; font-family: "League-Gothic", Courier; font-size: 50px; text-transform: uppercase; color: #fff; text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; }
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
5.返回顶部按钮
页面定制CSS代码：
1 #back-to-top { 2 background-color:grey; 3 bottom: 20px; 4 box-shadow: 0 0 6px black; 5 padding: 5px 10px; 6 position: fixed; 7 right: 50px; 8 border-radius: 8px; 9 opacity: 1; 10 }
P.S.
第二行background-color:背景颜色;
第三行bottom:到页面底部距离;
第七行right:到页面右侧距离;
第九行opacity:透明度（1.0~0.0）（1：不透明，0：完全透明）;
页首Html代码：
<span id="top"></span> <span id="back-to-top"><a href="#" style="color:white">text</a></span>
P.S.
第二行<span id="back-to-top"><a href="#" style="color:字体颜色">按钮文本</a></span>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
6.返回底部按钮
页面定制CSS代码：
1 #back-to-bottom { 2 background-color:grey; 3 top: 30px; 4 box-shadow: 0 0 6px black; 5 padding: 5px 10px; 6 position: fixed; 7 right: 50px; 8 border-radius: 8px; 9 opacity: 1; 10 }
P.S.
第一行background-color:背景颜色;
第三行top:到页面顶部距离;
第七行right:到页面右侧距离;
第九行opacity:透明度（1.0~0.0）（1：不透明，0：完全透明）;
页首Html代码：
<span id="bottom"></span> <span id="back-to-bottom"><a href="#bot" style="color:white">text</a></span>
P.S.
第二行<span id="back-to-bottom"><a href="#bot" style="color:字体颜色">按钮文本</a></span>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
7.滚动公告
页首Html代码：
1 <div id="Scroll_info" style="text-align: center;color:blue;font-size:18px;padding:5px;opacity: 1">I love coding</div> 2 <script> 3 function func(){ 4 var tag = document.getElementById('Scroll_info'); 5 var content = tag.innerText; 6 var f = content.charAt(0); 7 var l = content.substring(1,content.length); 8 var new_content = l + f; 9 tag.innerText = new_content; 10 } 11 setInterval('func()',200); 12 </script>
P.S.
第一行<div id="Scroll_info" style="text-align: 对齐方式;color:颜色;font-size:字体大小;padding:5px;opacity:透明度（1.0~0.0）（1：不透明，0：完全透明）">公告内容</div>
第十一行setInterval('func()',滚动速度);
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
8.Github快捷路径
前往http://tholman.com/github-corners/
选择你喜欢的款式并复制到页首Html代码
记得修改链接地址( • ̀ω•́ )✧
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
9.悬浮推荐栏+反对消失
页面定制CSS代码：（悬浮推荐栏）
1 #div_digg { 2 padding: 10px; 3 position: fixed; 4 _position: absolute; 5 z-index: 1000; 6 bottom: 50px; 7 right: 0; 8 _right: 20px; 9 border: 1px solid #D9DBE1; 10 background-color: #FFFFFF; 11 filter: alpha(Opacity=80); 12 -moz-opacity: 0.8; 13 opacity: 1; 14 }
P.S.
第六行bottom: 到页面底部距离;
第十行background-color: 背景颜色;
第十三行opacity: 透明度（1.0~0.0）（1：不透明，0：完全透明）;
页面定制CSS代码：（反对消失）
.buryit { display: none; }
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
10.雪花特效
1 <script> 2 (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('❄'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:300,flakeColor:"#2894FF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery); 3 $.fn.snow({ minSize: 5, maxSize: 50, newOn: 800, flakeColor: '#00BFFF' }); 4 </script>
P.S.
第三行$.fn.snow({ minSize: 最小雪花大小, maxSize: 最大雪花大小, newOn: 800, flakeColor: 雪花颜色 });
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
END（づ￣3￣）づ╭❤～
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ
─=≡Σ(((つ•̀ω•́)つBuilding Blog（个性化博客）1
─=≡Σ(((つ•̀ω•́)つBuilding Blog（个性化博客）2