底部新增小魚

在部落格園頁尾新增程式碼

<!-- 底部加了小魚<・)))><<~ -->
<div id="jsi-flying-fish-container" class="container"></div>
<script src='https://blog-static.cnblogs.com/files/elkyo/fish.js'></script>
<style>
@media only screen and (max-width: 767px){
#sidebar_search_box input[type=text]{width
 
:calc(100% - 24px)}
}
</style>

左上角github推廣

頁首html程式碼：

<a href="https://github.com/fgfxf" target="_blank" class="github-corner" style="position: absolute;z-index: 999;" 
aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#ffb515; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"
 
 
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>

替換成你的github主頁

滑鼠點選爆炸煙花效果

<!--滑鼠點選爆炸五顏六色特效-->
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;">
</canvas>
<script type="text/javascript" src="https://files.cnblogs.com/files/songhaixing/anime.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/songhaixing/fireworks.js"></script>
<!--end-->

雪花效果

首先在頁面引入 jQuery 庫和 jQuery.snow.js（或者使用壓縮版本 jQuery.snow.min.js）：

<script src="jquery.js"></script>

<script src="jquery.snow.js"></script>

其中jquery.snow.js的內容如下

<script>
(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       : 500,
                                    flakeColor  : "#FFFFFF"
                                },
                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);</script>

然後在任意地方插入以下程式碼開啟

<script>
$(document).ready( function(){
        $.fn.snow();
});
</script>

jquery.snow.js裡面的部分引數可以自己設定

minSize  /* 雪花的最小尺寸，預設值 10 */
maxSize /* 雪花的最小尺寸，預設值 20 */
newOn /* 每毫秒雪花出現的頻率，預設是 500 */
flakeColor /* 雪花的顏色，預設值是白色 #FFFFFF */

也可以在開啟時調整內容：
$.fn.snow({
    minSize: 5,
    maxSize: 50,
    newOn: 1000,
    flakeColor: '#0099FF'
});

參考資料：https://www.cnblogs.com/lhb25/archive/2012/12/24/jquery-snow-falling-effect.html

改變網頁裡的游標

準備一張32x32或者64x64的png圖片

在後臺新增html程式碼

<style>
body{
cursor: url('https://pic.cnblogs.com/face/1247197/20180330210354.png'),pointer;
}
</style>

踩坑：1：這段程式碼應該儘可能的在html網頁的前面，放後面就不起作用。

　　　2：我用png成功了，ico、cur檔案失敗了

網頁滾動條

自定義css樣式表裡新增程式碼

/*滾動條整體樣式*/
body::-webkit-scrollbar {
width: 5px;
height: 1px;
}
/*滾動條滑塊*/
body::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #252525;
}
/*滾動條軌道*/
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 5px;
background: #FF8080;
}

評論帶頭像，wechat、alipay捐贈，右下角的“回到頂部”，文字複製版權

詳細見工程

https://www.cnblogs.com/esofar/archive/2018/08/23/cnblogs-theme-silence.html

https://github.com/esofar/cnblogs-theme-silence

先引入css，然後在js裡前幾行修改自己的內容。