本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。

注意说明

每个人的审美观念不一样，所以请先参考本站或测试在用。
主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后在进行美化。
主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
美化代码部分采集跟站长捣鼓出来的，都是已经过测试。

更新教程及说明

（最新版）CSS代码添加到后台子比主题设置->自定义代码->自定义CSS样式
（最新版）JS即javascript代码添加到后台子比主题设置->自定义代码->自定义javascript代码
（最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去，保存即可。
其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我不重复告知了，请注意看上面的方法。

教程按是更新时间排序，新的美化教程排在最后面-越往后越新

首页文章点击更多按钮样式美化

CSS代码：

/点击更多/
.theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 150px; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;}

截图

改网站背景图+改网站背景色

/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;}

/*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;}

顶部导航栏添加背景图片

css代码：

/*导航栏图片背景*/
.header-layout-1{position:relative;background-image:url(https://oss.uzm.cc/wp-content/uploads/2023/10/20231002180042.png);background-position:center right;background-size:auto 100%;}

左侧菜单添加背景图片（手机才能看）

效果图：

css代码：

/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://oss.uzm.cc/wp-content/uploads/2023/10/20200829145305_5a9ac.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}

网站添加添加复制透明提示框

子比主题设置—>自定义代码—>自定义javascript代码：,添加以下代码：

//透明复制提示
// by：小新轻创 fx.xxqcy.xyz
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【小新轻创 fx.xxqcy.xyz 】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<!--透明复制提示开始--> 
<!--by：小新轻创 fx.xxqcy.xyz-->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束-->

友情链接右侧添加美化按钮

添加方法：后台设置—>外观—>小工具—>添加Zibll 链接列表(新版),加到标题右侧按钮即可

<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche1"></use></svg>申请友链

注意要引用阿里巴巴矢量图库

Zibll主题给文章内超链接加上波浪效果

动态效果：

目前这个美化还并不是很多，喜欢的朋友可以使用看看效果，很简单把代码添加到合适的位置即可，应该所有WordPress网站都可以使用。只需两行代码即可实现

代码如下：

/*超链接下波浪线*/
.wp-posts-content a:hover {color:#ff4500;text-decoration:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23FF4500' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")repeat-x 0 100%;background-size:20px auto;animation:waveMove 1s infinite linear}
@keyframes waveMove{from{background-position:0 100%}
to{background-position:-20px 100%}
}
/*超链接下波浪线结束*/

Zibll主题评论框添加一言随机语录

前言

用户评论的时候老是乱评论没有文采，分享一段代码随机语录，这样让你们博客评论都非常有内涵

<script>
$.getJSON("https://fx.xxqcy.xyz/api/yan/index.php?encode=json",function(data){
$("#comment").text(data.text);
});
$(function(){
$("#comment").click(function() {
$(this).select();
})
})
</script>

教程

目前适配好的是社长在用的子比主题，如果你也是子比主题的话，直接将上面的代码放置到：

后台–>子比主题设置—>自定义代码—>自定义底部 HTML 代码：,添加以上代码：

如果你有语录api接口，你可以给代码中的https://fx.xxqcy.xyz/api/yan/index.php?encode=json替换成你的api

如果想对接别人的的其他语录接口，也是一样的，直接放进接口地址里面接口，需要注意的就是，需要 json 输入格式

子比主题美化 – 文章列表悬停萝莉

css代码：

/*首页文章列表悬停可爱萝莉*/
@media screen and (min-width:980px) {
.tab-content .posts-row>*:hover {
    transition:all 0.3s;
    content: " ";
    right: -50px;
    background-size: contain;
    background-position: center right;
    background-image: url(https://oss.uzm.cc/wp-content/uploads/2023/10/decorate1.png);
    background-repeat: no-repeat;
}
}

效果图：

Zibll子比主题加载更多美化

/*点击更多*/
.chat-next a, .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a {
    color: var(--muted-color);
    border-radius: 30px;
    padding: 6px 0px;
    background-color: var(--main-bg-color);
    display: block;
    opacity: 1;
    font-weight: bold;
    width: 35%;
    margin: auto;
    border: 2px solid #fd7979;
    border-style: dashed;
    box-shadow: 0 0 4px 9px var(--main-bg-color);
}
.chat-next a:hover, .theme-pagination .ajax-next a:hover, .theme-pagination .order-ajax-next a:hover {
    opacity: 1;
    color: #ff7676;
    background-color: #ffffff;
    box-shadow: 0 0 4px 9px #ffffff00;
    border: 2px solid #fb6363cc;
    background: linear-gradient(rgb(237 111 0 / 0%), rgb(255 244 244 / 0%)), url(https://oss.uzm.cc/wp-content/uploads/2023/10/102b20f38e20231028194612.png) no-repeat 70% 100%/ 12% 100%;
}

子比主题添加原神页面

css代码：

/*原神启动*/
body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(https://oss.uzm.cc/svg/1154045358.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
    animation: fadeOut 3s;
    animation-fill-mode: forwards;
    -webkit-transition: fadeOut 3s;
    transition: fadeOut 3s;
    pointer-events: none;
}
@keyframes fadeOut {
  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
  }
}

主题logo扫光

/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}

底部添加蓝色波浪

在zibll主题目录下，footer.php文件中的“</footer>”（重要）下面添加下面的代码：

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

添加文章更新或过期失效提示

将下面的函数代码加入到主题目录下functions.php文件中。

//文章过期提示
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或已失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="轩逸博客" href="http://wpa.qq.com/msgrd?v=3&uin=1649825180&site=qq&menu=yes"><b>轩逸站长</b></a>。</div >';
    }
        echo $custom_content;
    }

说明：请自己修改上面有关于本站的信息，改成自己网站信息即可，图标可以用阿里矢量图。

在主题目录zibll/inc/functions/zib-single.php文件中，文章分页函数（子比主题V6.1版本（主题更新有可能会有变动）大概是296回车一行代码放在297行，见下图）下面添加下方代码即可。

article_time_update();//文章过期提示

CSS代码：（在自定义CSS样式添加下面代码）

/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}

底部炫酷引导卡片小工具

在后台—》外观—》小工具—》首页-底部全宽度，自定义HTML添加下面代码即可。

<div id="ijinse" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>小新轻创</h3>
      <p>锦瑟无端五十弦  一弦一柱思华年</p>
    </div>
    <ul class="actions">
      <li>
        <a href="https://img.buerds.com" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="https:/fx.xxqcy.xyz/youqing/j" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; /*background: rgb(224,32,140); */background: linear-gradient(to right, rgb(103,58,183) 0%, rgb(233,30,99) 100%);border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("ijinse").parentNode.parentNode.style.padding=0;
</script>

效果图：

好看的侧边ip标签小工具

代码：

<div id="wiiuii1">
  <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div>

效果：

评论框添加背景图片

在主题设置—》自定义CSS样式，添加下面的CSS代码：

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.atbkw.cn/wp-content/uploads/aotian/qita/pinglu.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}

说明：图片自己保存到本地，图片大小（162 X 75，建议透明的png图片）,自己添加喜欢的背景图片。

下载页面添加声明或说明

HTML代码

          <!--开始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>
                <div class="panel">
                     <div class="panel-heading">
                          <h3>下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.小新轻创网所提供的压缩包若无特别说明，解压密码均为<em>改自己的</em></em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便傲天博客网及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3>站长声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->

添加说明（注意）：主题目录zibll/pages/download.php,在合适的位置添加上面的即可，大概是在115行位置添加（我的在115行添加，不知道新版有没有变化）。

改网站背景图+改网站背景色

把下面背景图代码放到主题下的css里面，我是子比主题就放到后台的css里面就可以了,把下面代码的图片链接改成你需要的背景图就行了。
如果不想用背景图，改背景色也可以，下面的背景色代码放入css里面颜色代码我就不多说了。

/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;}

/*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;}

网站底部—灵动的鱼群跳跃

如果用的子比主题：把代码复制粘贴到主题后台–>自定义代码–>自定义底部HTML代码
其它主题：把代码放到主题footer.php文件的在 <footer></footer> 之间添加两行代码

<div id="jsi-flying-fish-container"></div>
<script src="https://www.atbkw.cn/aotian/js/script.js"></script>

文字效果代码网站底部代码

分享一共文字效果代码看起来还不错，可以用于网站底部用，喜欢的拿走
代码

<div id="chakhsu"></div>
<script>
    var chakhsu = function (r) {
        function t() {
            return b[Math.floor(Math.random() * b.length)]
        }
        function e() {
            return String.fromCharCode(94 * Math.random() + 33)
        }
        function n(r) {
            for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                var l = document.createElement("span");
                l.textContent = e(), l.style.color = t(), n.appendChild(l)
            }
            return n
        }
        function i() {
            var t = o[c.skillI];
            c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
        }
        /*以下内容自定义修改*/
        var l = "小新轻创，",
            o = ["fx.xxqcy.xyz。", ].map(function (r) {
                return r + ""
            }), a = 2, g = 1, s = 5, d = 75,
            b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
            c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g};
        i()
    };
    chakhsu(document.getElementById('chakhsu'));
                    </script>
                  <div>

网站底部添加网站运行时间代码自动计算精确到秒

前言

分享一个网站运行时间代码可以更好的记录网站运行多久精确到秒

代码

<span id="runtime_span"></span>
<script type="text/javascript">function show_runtime(){window.setTimeout("show_runtime()",1000);X=new 
Date("09/30/2020 15:10:00");
Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
runtime_span.innerHTML="本站勉强运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();</script>

在网站右侧边栏添加和风天气模块

后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可

<!--by：小新轻创-img.buerds.com-->
<div id="he-plugin-standard"></div>
<script>
WIDGET = {
  "CONFIG": {
    "layout": "2",
    "width": "285",
    "height": "300",
    "background": "1",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "key": "3180d3c43e524753ab8bcef69dba023a"
  }
}
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
<!--by：小新轻创-img.buerds.com-->

首页主内容上方添加跑马灯公告小工具

网站后台—>外观—>小工具—>自定义HTML，然后添加到合适位置集合即可。

<!--跑马灯公告-->
<style>
  #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} }
</style>
    <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;">
        <marquee>
        <b id="nr">欢迎来到小新轻创 - 专注于网络技术共享。</b> </marquee>
    </div>

添加鼠标样式

CSS代码：（本站的样式）

 /** 鼠标样式 开始**/
/** 普通指针样式**/
body{cursor: url(https://a-oss.zmki.cn/img/5ccab616ea9c8.cur), default;}
/** 链接指针样式**/
a:hover{cursor:url(https://a-oss.zmki.cn/img/5ccab63d8fc80.cur), pointer;}
/** 鼠标样式 结束**/

首页文章列表悬停上浮

CSS代码：

/*首页文章列表悬停上浮*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}

导航栏标题字体加粗

CSS代码：

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

长文章分页按钮美化

wordpress自带的分页按钮是比较丑的很突兀，经过社长一段下面的 CSS 代码优化之后会变得更加美观
网站管理后台 —> 子比主题设置 —> 自定义代码 —> 自定义 CSS 样式，把下面的 css 代码复制粘贴到里面即可。

自定义 CSS 代码

/*文章分页按钮美化*/
.post-page-numbers{padding: 4px 10px;text-align:center;display: inline; }.post-nav-links{background:0;margin-left: -50px;}

实现网站全局变灰白

前言和教程：

这个代码适合用于纪念重大的沉重事件日子，只需把代码复制粘贴到自定义CSS样式里即可。

/*网站全局变成灰色*/
html{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

版权声明 1 本站名称： 小新轻创
2 本站网址：fx.xxqcy.xyz
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END

子比美化网站模板 Wordpress 主题模板代码插件子比美化源码分享网站源码
# 网站源码