Building Blog(個性化博客)1

時間 2019-11-13

標籤 building blog 個性化博客简体版

原文原文鏈接

ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つjavascript

─=≡Σ(((つ•̀ω•́)つBuilding Blog（個性化博客）1 css

─=≡Σ(((つ•̀ω•́)つBuilding Blog（個性化博客）2 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="http://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('&#10052;'),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>