建站笔记

2025-05-22
05-22
子比主题 - 侧边动漫图片社区样式-汇聚访

实用子比主题 – 侧边动漫图片社区样式

这是一款仿B站的侧边动漫图片社区小工具，这款小工具是纯代码并没有写成可视化小工具，没有适配昼夜模式，放上自己的二维码即可，旁边的几个标签都可以更改，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：外观 - 小工具 - 文章页&侧边栏（自定义HTML代码区块）添加以下代码即可，图片可自行本地化，以防丢失！ HTMLCSS <div class="mhy-qrcode-top-card"> <div class="mhy-qrcode-top-card__role-image" style="background-image: url(https://oss.longs.cn/images/2025/05/20250519022256633.png);"> </div> <div class="mhy-qrcode-top-card__role-content"> <div class="mhy-qrcode-top-card__role-content-background" style="background-image: url(https://oss.longs.cn/images/2025/05/20250519022519860.png);"> <div class="background__welcome"> <div class="background__welcome-image" style="background-image: url(https://webstatic.mihoyo.com/upload/static-resource/2023/03/06/14e05cd4d8b0babd6c7985fc 1f5801e5_689092345277877987.png);"> </div> <div class="background__welcome-text_img" style="background-image: url(https://oss.longs.cn/images/2025/05/20250519025425992.webp);">...
6个月前
建站笔记
2025-05-22
05-22
子比主题 - 添加一个每日60s新闻模块+新闻独立页面+本地接口-汇聚访

实用子比主题 – 添加一个每日60s新闻模块+新闻独立页面+本地接口

大家好，本次汇聚访给大家带来了子比主题添加一个每日60s新闻模块及独立页面和本地接口的教程，为什么要用本地接口而不用Api呢，因为Api随时可能失效，但是本地接口避免了这个问题，话不多说有喜欢的自行部署吧，教程写的很详细！ 演示效果： 代码部署： [hidecontent type="payshow"] 一：本地接口制作方法： 第一步：下载文章附件文件后把本地接口文件夹里的文件上传到网站的根目录下！ 第二步：打开 60s的文件夹，修改 60s.php 文件中的 Tonke！ 第三步：token获取——前往获取 注册登录 - >个人管理 -> 个人中心 -> 数据中心 -> token管理 - >获取token 第四步：添加宝塔 计划任务，如下图所示: 任务类型：访问URL-GET URL地址： 你的网站域名/60s/60s.php?api=api-json 如果你不是放在根目录的请自行修改 执行周期：每天执行一次就行，不建议太早。也可以每天隔几小时执行一次 添加好之后先手动执行一次 第五步：检查60s文件夹内的 test.json 文件内是否已有内容，如果没有内容请检查是否那一次出问题了!!! 二：模块+页面 添加步骤 第一步：添加新闻模块: 1、子比主题文件目录/wp-content/themes/zibll/func.php 或 functions.php 文件内...
6个月前
建站笔记
2025-05-18
05-18
子比主题 - 旋转小人小工具-汇聚访

实用子比主题 – 旋转小人小工具

今天逛友链的时候,看到一个十分漂亮的小工具，于是就扒了下来，在这里分享给大家哦·~ 演示效果： 代码部署： [hidecontent type="payshow"] JS代码和CSS及其图片都可以放在本地，以防丢失哦~ <div style="background:#fff;border-radius:15px;padding:10px 20px;" class="card-widget card-announcement"> <div class="item-headline"><i style="font-size:20px;color:red;" class="fa fa-bullhorn"> </i> <span style="font-size:15px;font-weight:700;margin-left:3px;line-height:15px;"> 公告</span></div> <div class="announcement_content">        <p>不定时更新博客，欢迎交换<a href="/links.html"><strong>友链</strong></a>...</p> <div class="twopeople"> <div class="container" style="height:200px;"><canvas class="illo" width="1200" height="1200"...
6个月前
建站笔记
2025-05-14
05-14
子比主题 - 右侧新版悬浮导航美化版本修正版本-汇聚访

实用子比主题 – 右侧新版悬浮导航美化版本修正版本

子比主题现在右侧悬浮导航还是比较不错的，功能页比较全面，如果有喜欢折腾的朋友可以自己修改下，右侧悬浮导航，此教程是从其他博客看到后觉着不错，可以学习下，喜欢的朋友可以自己测试，只显示电脑端，手机端空间太小，影响阅读、美观。 演示效果： 代码部署： [hidecontent type="payshow"] CSS自定义底部HTML 添加教程第一步首先就是添加CSS，zibll主题设置—全局功能—自定义代码—自定义CSS样式添加以下CSS代码！ .gotop { position: fixed; bottom: 20%; right: 1%; z-index: 999; }/*www.huijuf.com*/ .gotop-box{ box-shadow: 0 4px 23px rgba(0, 0, 0, 0.08); border-radius: 8px; background: #fff; } .gotop .gotop-item{ color:...
6个月前
建站笔记
2025-05-14
05-14
子比主题 - 添加灵动岛样式美化-汇聚访

实用子比主题 – 添加灵动岛样式美化

这是一款模仿苹果灵动岛一个样式代码，代码是扒的mac站长的一个样式，然后对于灵动岛，里面是比如用户访问哪个页面或者文章分类等，他会调用该页面的标题来欢迎的灵动岛，消息和用户中心我是单独判断的一个样式，话不多说直接上演示！ 演示效果： 代码部署： [hidecontent type="payshow"] 自定义CSS自定义头部HTMLPHP .dynamic-island:hover img {width:30px; height:30px;;} .bars {display:flex;align-items:center; justify-content:flex-end; gap:3px;} .bar {width:2px;height:13px;background-color:green;animation:bounce 1s infinite ease-in-out;animation-direction:alternate;} .bar:nth-child(1) {animation-duration:1s;} .bar:nth-child(2) {animation-duration:0.9s;} .bar:nth-child(3) {animation-duration:0.8s;} .bar:nth-child(4) {animation-duration:0.7s;} .bar:nth-child(5) {animation-duration:0.6s;} .bar:nth-child(6) {animation-duration:0.9s;} .bar:nth-child(7) {animation-duration:0.7s;} .dynamic-island {position:fixed;top:80px;left:50%;transform:translateX(-50%)...
6个月前
建站笔记
2025-05-14
05-14
子比主题 - PC底部展示网易云热评-汇聚访

实用子比主题 – PC底部展示网易云热评

这个原创是由星雨博客站长做的，最初是打算做成冒泡上浮的那种效果，后来觉得简洁的弹窗更为合适，这个弹窗我一共做了两种效果，才呈现出来现在的效果，有能力的小伙伴可进行二次开发创作，那么废话不多说，直接来看效果！ 演示效果： 第一款： 第二款： 代码部署： [hidecontent type="payshow"] 效果①效果② 进入wordpress后台-外观-小工具-自定义html代码-所有页面 底部全宽度 <div id="wniui-popup-window" class="wniui-show-popup-window"> <div class="wniui-popup-header"> <div class="wniui-popup-window-title">网易云热评</div> <span id="wniui-popup-username"></span> <a id="music-link" href="" target="_blank" style="position: absolute; top: 8px; right: 10px;"> <svg style="transition: .3s;height:30px;width:30px;" t="1740280523955" class="icon" viewbox="0...
6个月前
建站笔记
2025-05-06
05-06
子比主题 - 给文章内超链接加上波浪效果-汇聚访

实用子比主题 – 给文章内超链接加上波浪效果

目前这个美化还并不是很多，喜欢的朋友可以使用看看效果，很简单把代码添加到合适的位置即可，应该所有WordPress网站都可以使用。只需两行代码即可实现！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题设置–>>自定义代码–>>自定义 CSS 样式添加以下代码即可： /*超链接下波浪线*/ .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...
6个月前
建站笔记
2025-05-06
05-06
子比主题 - 添加一个类似哔哩哔哩客服中心头部banner图-汇聚访

实用子比主题 – 添加一个类似哔哩哔哩客服中心头部banner图

大家好，这次汇聚访给大家带来一款类似哔哩哔哩客服中心头部的banner图，这个效果适合一些做二次元风格的网站，你可以放底部或消息通知页面顶部，适用大多数wordpress主题，有喜欢的自行部署吧。 演示效果： 代码部署： [hidecontent type="payshow"] CSSHTML 添加进后台自定义css即可 .banner { position: relative; overflow: hidden; height: 183px; background: url(https://blog.zbiwl.com/bilibili/59nm7456wp.jpg@70p) repeat; background-size: 1200px 700px } .banner .banner-content { position: relative; margin: 0 auto; width: 970px } .banner .banner-content...
6个月前
建站笔记
2025-05-06
05-06
子比主题 - 给网站底部添加一个蓝色矩形循环跳动动画-汇聚访

实用子比主题 – 给网站底部添加一个蓝色矩形循环跳动动画

这是一款子比主题的蓝色矩形循环跳动动画，子比主题官方的演示站目前正在使用的一款美化效果，部署起来十分简单，图片放置的位置为子比的存储库，不用害怕丢失，有喜欢的朋友自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：WP后台 - 外观 - 小工具 - 自定义HTML代码中添加以下代码即可（推荐放置：首页-主内容下面）： <div class="widget-graphic-cover mb20 hidden-xs"><div style="--font-size:30px;"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 16%!important;"><video autoplay="" loop="" muted="" class="fit-cover lazyloading" data-src="https://oss.zibll.com/zibll.com/2023/04/蓝色矩形循环跳动.mp4" src="https://oss.zibll.com/zibll.com/2023/04/蓝色矩形循环跳动.mp4" poster="https://oss.zibll.com/zibll.com/2024/03/20240317190819420-蓝色矩阵跳动-封面.jpg"></video><div class="abs-center text-center graphic-text...
6个月前
建站笔记
2025-05-06
05-06
子比主题 - 昵称抖音风格字体美化代码-汇聚访

实用子比主题 – 昵称抖音风格字体美化代码

子比用户昵称加一个抖音故障风格字体的美化代码，看着挺不错的，记录一下日后使用。 演示效果： 代码部署： [hidecontent type="reply"] 代码部署就不用说了，css代码放到子比主题自定义css即可。 /*昵称*/.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,...
6个月前
建站笔记
1…2324252627…31跳转