博客园美化工程

底部添加小鱼

在博客园页脚添加代码

<!-- 底部加了小鱼<・)))><<~ -->
<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里前几行修改自己的内容。

删除博客园自带的广告

css中输入

#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {display:none;!important}

适配手机端

 适配不是很好，但是比不添加强得多

添加html代码

<!-- 手机端适配 -->
<script>
var content = 'width=device-width, initial-scale=1 user-scalable=no';
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', content);
document.head.appendChild( viewport );
</script>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>