子比主题美化教程 3

子比主题美化配置：
1.子比主题设置-页面显示-顶部多功能组件-启用顶部多功能组件（首页/专题页/分类页/标签页/用户页/文章页/搜索页/论坛首页）全部显示-保存；

CSS代码添加到后台：子比主题设置—>自定义代码—>自定义CSS样式
JS即javascript代码添加到：后台子比主题设置—>自定义代码—>自定义javascript代码
自定义HTML小工具：添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可

1.zibll子比主题文章标签美化：

复制CSS代码到后台子比主题设置—》自定义CSS样式—》将CSS代码粘贴框里，即可大功告成

/*文章随机彩色标签开始*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*文章随机彩色标签结束*/

2.主题LOGO扫光：

后台→主题→自定义代码→自定义css代码

/* 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;}}
/* logo扫光结束 */

3.网站添加侧边彩色滚动条：

一般主题都会自带 自定义代码 这样主题设置的，只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦！如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码就即可美！

/**彩色滚动条样式开始*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
/**彩色滚动条样式结束*/

4.用户头像呼吸光环+鼠标悬停旋转放大：

/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*头像呼吸光环和鼠标悬停旋转放大结束*/

5.整站底部添加好看的蓝色波浪：

在zibll主题目录下，themes/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>
<!--底部波浪结束-->

6.子比主题外链修改go外链跳转页面：

wwwroot→你的域名→wp-content→themes→zibll→go.php,或者直接覆盖文件，也可以复制以下代码，这个是本站现在在用的。

<?php
if (
    strlen($_SERVER['REQUEST_URI']) > 384 ||
    strpos($_SERVER['REQUEST_URI'], "eval(") ||
    strpos($_SERVER['REQUEST_URI'], "base64")
) {
    @header("HTTP/1.1 414 Request-URI Too Long");
    @header("Status: 414 Request-URI Too Long");
    @header("Connection: Close");
    @exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', 'k_e_k_c_c_n', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
    //判断取值是否加密
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url = base64_decode($t_url);
    }
    //防止xss
    $t_url = htmlspecialchars($t_url);
    //对取值进行网址校验和判断
    preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
    $wiiui_title = get_bloginfo('name');
    $title = $wiiui_title . ' - 安全中心';
    if ($matches) {
        $url = $t_url;
        // $title = '页面加载中,请稍候...';
    } else {
        preg_match('/\./i', $t_url, $matche);
        if ($matche) {
            $url = 'http://' . $t_url;
            // $title = '页面加载中,请稍候...';
        } else {
            $url = 'http://' . $_SERVER['HTTP_HOST'];
            $title = '参数错误，正在返回首页...';
        }
    }
} else {
    $title = '参数缺失，正在返回首页...';
    $url = 'http://' . $_SERVER['HTTP_HOST'];
}
$url = str_replace('&', '&', $url);
?>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <?php echo "<link rel='apple-touch-icon-precomposed icon' href='" . _pz('iconpng') . "' type='image/x-icon'/>"; ?>
    <noscript>
        <meta http-equiv="refresh" content="1;url='<?php echo $url; ?>';">
    </noscript>
    <script>
        function link_jump() {
            //禁止其他网站使用我们的跳转页面
            var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
            if (!MyHOST.test(document.referrer)) {
                location.href = "//" + MyHOST;
            }
            location.href = "<?php echo $url; ?>";
        }
        //延时10S跳转，可自行修改延时时间
        setTimeout(link_jump, 10000);
        //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
        setTimeout(function() {
            window.opener = null;
            window.close();
        }, 50000);
    </script>
    <link rel="stylesheet" id="_fontawesome-css" href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
    <title>
        <?php echo $title; ?>
    </title>
    <style>
        body,html{padding:0;margin:0}
        body{background:#f5f6f7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
        a{cursor:default;text-decoration:none;word-wrap:break-word;word-break:break-all}
        .wiiuii-go-main{display:flex;width:100%;height:100%;justify-content:center;align-items:center}
        .wiiuii-go-container{position: relative;max-width:28em;height:auto;display:inline-block;background:#fff;margin:10px;padding:1.5em;border-radius:5px;box-shadow:0 0 10px rgba(116,116,116,.1)}
        .wiiuii-go-content a{color:#036af4}
        .wiiuii-go-content a:hover{color:#e91e63}
        .wiiuii-go-logo{text-align:center;width:auto;height:65px;margin-bottom:10px}
        .wiiuii-go-logo img{max-width:100%;height:100%}
        .wiiuii-go-msg{cursor:default;text-align:center;padding:10px 5px;font-weight:700;color:rgba(255, 0, 0, 0.85);background:rgba(255, 0, 0, 0.1);border-radius:5px}
        .wiiuii-go-button-item{text-align:right}
        .wiiuii-go-button{display:inline-block;border-radius:99px;padding:10px 15px;background:rgba(116,116,116,.1);transition:all .5s}
        .wiiuii-go-button a{font-weight:700;font-size:14px;color:#333}
        .wiiuii-go-button:hover{color:#000;background:rgba(116,116,116,.2)}
        .wiiuii-goid-item{position:absolute;top:10px;left:10px;border-radius:4px;overflow:hidden;background:#ffd07c}
        .wiiuii-goid-title{padding:0 4px;background:#ffa400}
        .wiiuii-goid-text{padding-right:5px}
        .wiiuii-go-container hr{border: 0;height: 0.05em;background: #eee;}
    </style>
</head>
<body>
    <div class="wiiuii-go-main">
        <div class="wiiuii-go-container">
            <div class="wiiuii-goid-item">
                <b class="wiiuii-goid-title">GID</b>
                <span class="wiiuii-goid-text">LINK<?php echo hexdec($url); ?></span>
            </div>
            <div class="wiiuii-go-logo">
                <?php echo zib_get_adaptive_theme_img(_pz('logo_src'), _pz('logo_src_dark')); ?>
            </div>
            <div class="wiiuii-go-content">
                <div class="wiiuii-go-msg">
                    <span><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 您即将离开<?php echo $wiiui_title; ?>，请注意您的账号和财产安全。</span>
                </div>
                <p>访问链接：<a onclick="location.replace('<?php echo $url; ?>')" title="<?php echo $url; ?>"><?php echo $url; ?></a></p>
            </div>
            <hr>
            <div class="wiiuii-go-button-item">
                <div class="wiiuii-go-button">
                    <a onclick="location.replace('//<?php echo $_SERVER['HTTP_HOST']; ?>')">返回首页</a>
                </div>
                <div class="wiiuii-go-button">
                    <a onclick="location.replace('<?php echo $url; ?>')">继续访问</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

7.进入网站提醒来源地址和问候语：

将下面php代码加入主题目录下themes/zibll/footer.php文件中

<!-- 进入网站提醒来源地址和问候语客户端信息开始代码版 -->
<?php if (is_home ()) : ?> 
<div id="fps" style="z-index:5;position:fixed;bottom:3px;left:3px;color:#2196F3;font-size:10px;">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kaliisra/myblogstatic/kehuduan-js/fetch.min.js">
</script>
<script src="https://cdn.gmit.vip/layer/3.1.1/layer.js" type="text/javascript"
charset="utf-8">
</script>
<script>
  /*网站打开提醒代码开始*/
  $(function() {
    if (
    /*getCookie('msg') !=*/
    1) {
      var t = document.createElement("a");
      t.href = document.referrer;
      var msgTitle = t.hostname;
      var name = t.hostname.split(".")[1];
      if ("" !== document.referrer) {
        switch (name) {
        case 'bing':
          msgTitle = '必应搜索';
          break;
        case 'baidu':
          msgTitle = '百度搜索';
          break;
        case 'so':
          msgTitle = '360 搜索';
          break;
        case 'google':
          msgTitle = '谷歌搜索';
          break;
        case 'sm':
          msgTitle = '神马搜索';
          break;
        case 'sogou':
          msgTitle = '搜狗搜索';
          break;
        default:
          msgTitle = t.hostname;
        };
      };
      var time = (new Date).getHours();
      var msg = '';
      23 < time || time <= 5 ? msg = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？": 5 < time && time <= 7 ? msg = "早上好！一日之计在于晨，美好的一天就要开始了！": 7 < time && time <= 11 ? msg = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！": 11 < time && time <= 14 ? msg = "中午了，工作了一个上午，现在是午餐时间！": 14 < time && time <= 17 ? msg = "午后很容易犯困呢，今天的运动目标完成了吗？": 17 < time && time <= 19 ? msg = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~": 19 < time && time <= 21 ? msg = "晚上好，今天过得怎么样？": 21 < time && time <= 23 && (msg = "已经这么晚了呀，早点休息吧，晚安~");
      $.ajax({
        type: "get",
        url: "https://api.gmit.vip/Api/UserInfo/",
        async: true,
        success: function(data) {
          window.info = data;
          layer.msg("Hi~ 来自" + data.data.location + '~<br/>通过 ' + msgTitle + ' 进来的朋友！<br/>使用 ' + data.data.os + "<br/>" + data.data.browser + ' 访问本站！' + '<br/>' + msg);
          var showFPS = (function() {
            var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(callback) {
              window.setTimeout(callback, 1000 / 60);
            };
            var e, pe, pid, fps, last, offset, step, appendFps;
            fps = 0;
            last = Date.now();
            step = function() {
              offset = Date.now() - last;
              fps += 1;
              if (offset >= 1000) {
                last += offset;
                appendFps(fps);
                fps = 0;
              };
              requestAnimationFrame(step);
            };
            appendFps = function(fps) {
              var settings = {
                timeout: 5000,
                logError: true
              };
              //$('#fps').html('<span style="float:left;">' + fps + 'FPS</span><br/><span style="float:left">' + window.info.data.os + '</span><br/><span style="float:left;margin-top:1px;">' + window.info.data.browser + '</span><br/><span style="float:left;margin-top:1px;">' + window.info.data.location + '</span><br/><span style="float:left;margin-top:1px;"></span>');
            };
            step();
          })();
        }
      });
    };
  });
</script>
<?php endif;?>
<!-- 进入网站提醒来源地址和问候语客户端信息开始 -->

8.子比主题评论区显示IP&设备：

使用的主题是 zibll ，则RAR包上传至 wp-content/themes/zibll/ 目录下（然后网站根目录也复制一份show-useragent文件）

内容在123网盘:https://www.123pan.com/s/bQxjVv-pBMUh.html

10.给网站添加一个背景图：

把下面代码放到自定义Css代码里，把里面的链接换成自己的图片链接。

/***日间主题模式***/ 
body { 
    background-image: url("https://chyp.oss-cn-hongkong.aliyuncs.com/%E5%9B%BE%E7%89%87/-4ad3ef5e5816aaa0.jpg");/**这里改为你自己的图片地址**/ 
    background-position-x: center; 
    background-position-y: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
} 
/***夜间主题模式***/ 
.dark-theme { 
    background-position-x: center; 
    background-position-y: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-image: url("https://chyp.oss-cn-hongkong.aliyuncs.com/%E5%9B%BE%E7%89%87/-4ad3ef5e5816aaa0.jpg");/**这里改为你自己的图片地址**/ 
    background-size: cover; 
}

11.添加一个彩色昵称：

同样放到CSS自定义代码里。

/*昵称流彩字体效果开始*/
.display-name{
background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 600%;
animation: wzw 10s linear infinite;
}
@keyframes wzw {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -300%;
}
}
/*昵称流彩字体结束*/

12.网站文章页底部添加【@版权声明】三个样式

样式一：在zibll主题设置中→文章&列表→文章页面→版权声明处添加一下代码

<!--网站声明代码样式二 start-->
<!--by：XX资源网-www.zhcnli.top-->
    <div>
      <fieldset
        style="
          border: 1px dashed #008cff;
          padding: 10px;
          border-radius: 5px;
          line-height: 2em;
          color: #6d6d6d;
        "
      >
        <legend
          align="center"
          style="
            width: 30%;
            text-align: center;
            background-color: #008cff;
            border-radius: 5px;
           background-image: linear-gradient(to right, #0066FF, #FF99CC); text-align:center;" 
          "
        >
          文章版权声明
        </legend>
              <span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>XX资源网</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://www.zhcnli.top</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="https://qm.qq.com/cgi-bin/qm/qr?k=4p03zMXUrI4rda7XFFv1_kpOAHMa6ton&noverify=0&personal_qrcode_source=4" target="_blank">1706025774</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
 <!--网站声明代码样式二 END-->

13.广告合作代码：

外观→小工具→自定义html→添加到首页-主内容上面

/*广告合作代码修改版*/
/*BY:XX博客-www.zhcnli.top*/
<div class="textwidget custom-html-widget"><table style="width:100%;font-weight:700;text-align:center;" cellspacing="0" cellpadding="0" bordercolor="#640EF6" border="1">
  <tbody>
    <tr>
      <td style="width:20%;vertical-align:middle;">
<a href="https://www.zhcnli.top/" target="_blank" rel="noopener"><span style="font-size:13px;color:#E53333;">XX博客</span></a> 
      </td>
      <td style="width:20%;vertical-align:middle;" height="24">
        <a href="https://dh.43vg.cn/" target="_blank" rel="noopener"><span style="font-size:13px;color:#E53333;">XX收录网</span></a> 
      </td>
      <td style="width:20%;vertical-align:middle;" height="24">
        <a href="http://dh.anye6.cn/" target="_blank" rel="noopener"><span style="font-size:13px;color:#337FE5;">XX云收录网</span></a> 
      </td>
      <td style="width:20%;vertical-align:middle;" height="24">
        <a href="https://qm.qq.com/cgi-bin/qm/qr?k=ihOv0E8rT1mRI7WCx1EZ-ezsDiHZ0i27&noverify=0&personal_qrcode_source=3" target="_blank" rel="noopener"><span style="font-size:13px;color:#E53333;">广告位</span></a> 
      </td>
      <td style="width:20%;vertical-align:middle;" height="24">
        <a href="https://qm.qq.com/cgi-bin/qm/qr?k=ihOv0E8rT1mRI7WCx1EZ-ezsDiHZ0i27&noverify=0&personal_qrcode_source=3" target="_blank" rel="noopener"><span style="font-size:13px;color:#E53333;">文字广告位10/月</span></a> 
/*广告合作代码修改版*/
/*BY:XX博客-www.zhcnli.top*/

14.底脚图标代码:

这个代码可以加到页面&显示→底部页脚里的第二板块，第二行里使用。

<a target="_blank" href="点击图标跳转的链接">
<img src="图片或者图标直链接地址">这个后面可以加文字。

15.昵称抖音故障风格:

/*昵称抖音故障风格*/
.display-name{
    text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes shake-it{
    0%{
        text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
    }
    25%{
        text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    }
    50%{
        text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
    }
    100%{
        text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
    }
}
/*昵称抖音故障风格*/

/*文章标题加上渐变彩色文字 开始*/
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
  background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: -100% 0
  }
}
/*文章标题加上渐变彩色文字 结束*/

/*原神启动*/
body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(图片链接);
    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;
  }
}

18.子比主题认证图标修改(可以自定义SVG):

打开这个文件夹/www/wwwroot/你的域名/wp-content/themes/zibll/js，找到svg-icon.js，将zib_svgs[‘user-auth’]的变量替换掉

zib_svgs[‘user-auth’] = ‘原svg代码’;

zib_svgs[‘user-auth’] = ‘新svg代码’;

19.ajax加载更多美化按钮：

/*点击更多*/
.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://img.alicdn.com/imgextra/i3/2210123621994/O1CN01CBy1O11QbIhi0TbrM_!!2210123621994.png) no-repeat 70% 100%/ 12% 100%;
}

20.网站侧边添加小姐姐随机跳舞可折叠组件：

在网站侧边添加一个小姐姐随机跳舞的可折叠组件，这个组件的特点是，当用户点击时，会随机播放小姐姐的舞蹈视频。这样的设计不仅可以增加网站的趣味性，也可以吸引更多的用户停留和浏览。我目前使用的是WordPress系统来搭建我的网站，这个组件能够完美地适配WordPress系统。

以WordPress为例子，我们进入网站后台找到外观–小工具–自定义HTML，添加以下代码，如果不是WordPress，自己在想要的位置找到对应文件添加。自行更换接口即可播放

<section id="xiaojiejie">
    <div class="xiaojiejie"><style>#player { margin: 1px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 1px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; }</style>
        <button type="button" id="ckxjj">点我看小姐姐视频</button>
        <div id="xjjsp">
            <video id="player" src="https://www.cunshao.com/666666/api/web.php" controls="" alt="小姐姐视频"></video>
            <div class="kzsp">
                <button id="switch">连续: 开</button>
                <button id="next">下一个</button>
            </div>
            <button type="button" id="gbxjj">关闭视频</button>
        </div>
        <script>
            var player = document.getElementById('player');
            var bind = function (element, event, callback) {
                return element.addEventListener(event, callback);
            };
            var sp = 0;
            $(document).ready(function () {
                $('#ckxjj').click(() => {
                    $('#ckxjj').hide();
                    $('#xjjsp').show();
                    if (sp == 0) {
                        randomm();
                        sp = null
                    }
                    player.onerror = () => {
                        randomm()
                    }
                    player.play();
                });
                $('#gbxjj').click(() => {
                    $('#ckxjj').show();
                    $('#xjjsp').hide();
                    player.pause();
                })
            });



            var get = function (id) {
                return document.getElementById(id);
            };

            var auto = true;
            // 生成播放视频
            function randomm() {
                player.src = 'http://www.kuaidoushe.com/video.php';
                player.play();
            };
            bind(get('next'), 'click', randomm);

            bind(get('switch'), 'click', function () {
                auto = !auto;
                this.innerText = '连续：' + (auto ? '开' : '关');
            });
            bind(player, 'ended', function () {
                if (auto) randomm();
            });
            player.pause();
        </script>
    </div>
</section>

21.文章列表卡片3个小圆圈样式美化+代码区块添加圆点美化：自定义CSS代码

卡片模式文章美化CSS：

.posts-item {
            position: relative;
        }
    
        .posts-item.card::before {
            content: "";
            display: block;
            background: #fc625d;
            top: 10px;
            left: 15px;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            box-shadow: 16px 0 #fdbc40,32px 0 #35cd4b;
            position: absolute;
        }
    
        .posts-item.card {
            padding: 26px 10px 10px 10px;
        }

文章内代码高亮美化CSS：

.enlighter::before {
            content: "";
            display: block;
            background: #fc625d;
            top: 9px;
            left: 15px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
            margin: 0px 2px -7px;
            z-index: 1;
            position: absolute;
        }

        .enlighter-overflow-scroll.enlighter-v-standard .enlighter {
            padding: 35px 0 12px 0;
        }

22.给网站添加鼠标点击特效富强，民主，文明，和谐字样：

在网站上添加一个鼠标点击特效，当访客点击鼠标时，页面将展示出“富强、民主、和谐”的提示文字。这种特效在网上可以找到众多的教程，它实际上是一段简单的JavaScript代码。您只需将以下代码放置在网站的底部，即可实现这一功能。如果您使用的是子比主题，那么可以直接在后台的自定义底部HTML代码位置中插入这段代码，非常便捷。

<!--鼠标点击文字--> 
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array( "富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span />").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
<!--鼠标点击文字-->

23.文章版权声明样式美化效果：

子比主题：WordPress后台 >> 主题设置 >> 文章&列表 >> 文章页面 >> 将代码添加到“版权提示内容”中

默认版权样式：

样式一：

<div class="posts-copyright"><div class="entry-copyright px12">
<!--小旗搭建版权样式一-->
    <span class="badg badg-sm mr3 c-yellow">1</span> 如果您喜欢本站，<a href="https://xqdj.pp.ua/" style="color:#a102ff">        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-security-color"></use></svg>
        </i>点击这儿
  </a>赞助下本站，感谢支持！<br>
    <span class="badg badg-sm mr3 c-red">2</span> 可能会帮助到你：
    <a href="https://xqdj.pp.ua/" style="color:#00aeff" title="开发工具" target="_blank">
        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-user-auth"></use></svg>
        </i> 开发工具
    </a> | 
    <a href="https://blog.xwawl.cn/" style="color:red" title="解压资源" target="_blank">
        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-ontop-color"></use></svg>
        </i> 解压资源
    </a> | 
    <a href="https://blog.xwawl.cn/" style="color:#ffbe02" title="进站必看" target="_blank">
        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-comment-color"></use></svg>
        </i> 进站必看
    </a><br>
  <span class="badg badg-sm mr3 c-purple">3</span> 如若转载，请注明文章出处：
    <script>var url = window.location.href;document.write(document.URL);</script></span><br>
    <span class="badg badg-sm mr3 c-blue">4</span> 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责<br>    
    <span class="badg badg-sm mr3 c-green">5</span> 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请
    <a href="https://wpa.qq.com/msgrd?v=3&uin=1706025774&site=qq&menu=yes" style="color:red" title="联系站长qq1706025774" target="_blank">
        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-qq-color"></use></svg>
        </i> 联系站长
    </a> 进行删除处理
    <br>
  <span class="badg badg-sm mr3">6</span> 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法、侵权等任何非法活动，否则后果自负<br>
</div></div>

样式二：

<!--小旗搭建版权样式二 --><div class="single-bottom-html mg-b box b2-radius"><fieldset style="border: 8px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;" data-mce-style="border: 2px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;"> <legend style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 5px;" align="center" data-mce-style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 8px;">重要声明</legend> <fieldset style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;" data-mce-style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;"> <p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;"><span style="color: #000000;" data-mce-style="color: #000000;">本站资源大多来自网络，如有侵犯你的权益请联系管理员</span><span style="color: #000000;" data-mce-style="color: #000000;">E-mail:</span><span style="color: #ff6600;" data-mce-style="color: #ff6600;">[email protected]</span> <span style="color: #000000;" data-mce-style="color: #000000;">我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！</span></p> <hr> <p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;"><span style="color: #000000;" data-mce-style="color: #000000;">如果遇到</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">付费</span><span style="color: #000000;" data-mce-style="color: #000000;">才可</span><span style="color: #33cccc;" data-mce-style="color: #33cccc;">观看</span><span style="color: #000000;" data-mce-style="color: #000000;">的文章，建议升级</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">终身VIP。</span><span style="color: #000000;" data-mce-style="color: #000000;">全站所有资源</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">“<span style="color: #3366ff;" data-mce-style="color: #3366ff;">任意下免费看</span>”。</span><span style="color: #ff9900;" data-mce-style="color: #ff9900;">本站资源少部分采用</span><span style="color: #00ccff;" data-mce-style="color: #00ccff;">7z压缩，</span><span style="color: #33cccc;" data-mce-style="color: #33cccc;">为防止有人压缩软件不支持7z格式</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">，7z</span><span style="color: #000000;" data-mce-style="color: #000000;">解压，建议下载</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;"><em>7-zip</em></span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">，zip、rar</span><span style="color: #000000;" data-mce-style="color: #000000;">解压，建议下载</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;"><em>WinRAR</em></span><span style="color: #000000;" data-mce-style="color: #000000;">。</span></p> </fieldset> </fieldset></div>

样式三：

<head>
<!--小旗搭建版权样式三 -->
<style type="text/css">
.post-copyright {
    box-shadow: 2px 2px 5px;
    line-height: 2;
    position: relative;
    margin: 40px 0 10px;
    padding: 10px 16px;
    border: 1px solid var(--light-grey);
    transition: box-shadow .3s ease-in-out;
    overflow: hidden;
    border-radius: 12px!important;
    background-color: var(--main-bg-color);
}
.post-copyright:before {
    position: absolute;
    right: -26px;
    top: -120px;
    content: '\f25e';
    font-size: 200px;
    font-family: 'FontAwesome';
    opacity: .2;
}
.post-copyright__title {
    font-size: 22px;
}
.post-copyright_type {
    font-size: 18px;
    color:var(--theme-color)
}
.post-copyright .post-copyright-info {
    padding-left: 6px;
    font-size: 15px;
}
.post-copyright-m-info .post-copyright-a, .post-copyright-m-info .post-copyright-c, 

.post-copyright-m-info .post-copyright-u {
    display: inline-block;
    width: fit-content;
    padding: 2px 5px;
    font-size: 15px;
}
.muted-3-color {
    color: var(--main-color);
}
/*手机优化*/
@media screen and (max-width:800px){.post-copyright-m-info{display:none}}
</style>
</head>
<body>
    <div class="post-copyright" style="max-width:800px;margin:0 auto;">
        <div class="post-copyright__title" style="margin:10px 10px"><span 

class="post-copyright_title"><strong><script>document.write

(document.title);</script></strong></span></div>
        <div class="post-copyright__type" style="margin:10px 10px"><span 

class="post-copyright_type">本文链接：<script>var url = 

window.location.href;document.write(document.URL);</script></span></div>
        <div class="post-copyright-m">
            <div class="post-copyright-m-info">
                <div class="post-copyright-a">
                    <strong>文章作者</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https:/xqdj.pp.ua/">小旗搭建</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>隐私政策</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https:/blog.xwawl.cn" 

target="_blank">PrivacyPolicy</a></strong>
                    </div>
                </div>
                <div class="post-copyright-u" style="margin:10px 20px">
                    <strong>用户协议</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https:/blog.xwawl.cn/protocol" 

target="_blank">UseGenerator</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>许可协议 </strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://creativecommons.org/licenses/by-

nc-sa/4.0/" target="_blank">NC-SA 4.0</a></strong></div>
                </div>
            </div>
        </div>
    </div>
</body>

样式四：

<!--小旗搭建版权样式四 -->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>小旗搭建</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https:/xqdj.pp.ua</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=1706025774&site=qq&menu=yes" target="_blank">1706025774</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--版权申明样式-->

样式五：

<div class="posts-copyright"><div class="box">
    <!--小旗搭建版权样式五-->
    <b class="lurenfen"><p>本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。</p>
<p>如果用于其他用途，请购买正版支持作者，谢谢！若您认为「BLOG.XWAWL.CN」发布的内容若侵犯到您的权益，请联系站长邮箱:[email protected] 进行删除处理。</p>
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。
   </b>
  </div>
<style type="text/css"> 
.box
{
  position: relative;
  padding: 10px; 
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
}
.box:before
{
  content: '';
  position: absolute;
  width: 150%;
  height: 50%;
  background: linear-gradient(315deg,#00ccff,#d400d4);
  animation: animate 6s linear infinite
}
@keyframes animate 
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}
.box:after
{
  content: '';
  position: absolute;
  inset : 6px;
  background: var(--body-bg-color);
  border-radius: 15px;
  z-index: 2;
}
.lurenfen
{
  position: relative;
  font-weight: normal;
  color: #2997f7;
  z-index: 4;
  margin:15px;
}

</style></div>