建站笔记

2025-05-24
05-24
子比主题 - 分类栏目美化-汇聚访

实用子比主题 – 分类栏目美化

网站分类栏目美化的意义主要体现在提升用户体验和视觉吸引力，以及优化搜索引擎排名等方面。本文章将给大家分享两种分类栏目美化的教程哦~ 演示效果①： 演示效果②： 代码部署： [hidecontent type="payshow"] 将下方代码加入到后台CSS里即可！图片放在帖子附件里了，可自行下载！ 效果①效果② .index-tab ul>li.active { color: #ffffff00 !important; background-color: #ffffff00 !important; border-radius: 6px; z-index: 1; position: relative; height: 39px; line-height: 44px; background: url(https://img.dmguo.cn/2025/01/20250120091106173.png); background-repeat: no-repeat; -webkit-background-size: 91px 39px; -moz-background-size:...
子比主题子比美化
2025-05-24
05-24
子比主题 - ajax加载更多按钮美化-汇聚访

实用子比主题 – ajax加载更多按钮美化

给子比主题加一个ajax加载更多按钮的美化，这个美化确实很不错，（提供两种样式) 演示效果①： 演示效果②： 代码部署： [hidecontent type="reply"] 将下面代码放到子比自定义CSS即可 样式一： /*加载更多*/ .chat-next a, .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a { display: inline-block; width: 130px; -webkit-border-radius: 0 0 16px 16px; -moz-border-radius: 0 0 16px 16px; border-radius: 0 0...
子比主题子比美化
2025-05-24
05-24
子比主题 - 仿哔哩哔哩网站页面回顶部的火箭-汇聚访

实用子比主题 – 仿哔哩哔哩网站页面回顶部的火箭

网站添加一个仿哔哩哔哩网站页面回顶部的火箭，小白式部署方式，喜欢的可以设置一波。 演示效果： 代码部署： [hidecontent type="payshow"] 如果是子比主题的话直接填在主题设置里的头部自定义html里即可，其他主题请自行测试！！ HTMLCSSJS图片素材 <div class="to-top"></div> /*小火箭*/ .to-top { position: fixed; display: none; bottom: 100px; right: 20px; width: 62px; height: 85px; cursor: pointer; background-image: url(图片地址); background-position: -40px -44px; transition: transform 0.3s ease-in;...
子比主题子比美化
2025-05-24
05-24
子比主题 - MacOS系统弹窗跳转引导提醒-汇聚访

实用子比主题 – MacOS系统弹窗跳转引导提醒

尘封已久的代码，今天趁有空就跟大家分享一下！做有关Mac资源的站应该比较有用，该代码可以判断主机系统来显示对应的引导链接，样式简约美观，倒计时自动关闭！ 演示效果： 代码部署： [hidecontent type="reply"] JS代码放入后台！ /*JS弹窗跳转引导提醒*/ try { if($ || jQuery) { tipsFun(); } } catch(e) { let script=document.createElement("script"); script.type="text/javascript"; script.src="路径（文件在文章最后）/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(script); script.onload = tipsFun; } function tipsFun() { // 判断用户是否是windows if((navigator.platform == "Win32")...
子比主题子比美化
2025-05-24
05-24
子比主题 - 文章角标及封面图底部美化代码-汇聚访

实用子比主题 – 文章角标及封面图底部美化代码

今天分享的教程是WordPress子比主题美化教程：文章角标及封面图底部美化。简单的来说，就是在文章发布页面增加一个附加选项，可以通过这个附加选项达到我们想要的美化效果！文章发布时可在编辑页底部自行配置输入内容以及颜色，不填写内容则不显示。 演示效果： 代码部署： [hidecontent type="payshow"] 1.Zibll主题设置>>全局&功能>>自定义代码>>自定义CSS样式！ /*角标css*/ .posts-item.card .item-thumbnail { background:#c4cffa26; width:100%; padding-bottom:var(--posts-card-scale); } a.item-category { position:absolute; left:10px; top:10px; padding:5px 6px; font-size:1rem; line-height:1; color:#fff; background:var(--theme-color); border-radius:6px; } a.item-category-app { position:absolute; height:24px; line-height:24px; width:100%; text-align:center; bottom:0;...
子比主题子比美化
2025-05-24
05-24
子比主题 - 自带滑块验证图片修改-汇聚访

实用子比主题 – 自带滑块验证图片修改

对于子比的滑动模块我们很多人都不是很喜欢自带的滑动模块的图片，接下来我来教大家怎么自...
子比主题子比美化
2025-05-22
05-22
子比主题 - 侧边栏新增一个信息展示框-汇聚访

实用子比主题 – 侧边栏新增一个信息展示框

今天无聊逛站的时候，看到了一个非常好看的侧边小工具，于是我就扒了下来，今天分享给大家哦~ 演示效果： 代码部署： [hidecontent type="payshow"] 外观-小工具-侧边栏（自定义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);"> </div> </div> </div> <div...
子比主题子比美化
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 文件内...
子比主题子比美化
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"...
子比主题子比美化
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:...
子比主题子比美化
1…1617181920…25跳转