子比主题 – 添加最新通知模块小工具

飞流 · 发表于 2025-10-8 22:28:50

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

给子比主题首页加一个最新通知模块小工具，我觉得这个小工具比较好看的，加上这个小工具能够更好的提醒用户一些公告什么的，非常的实用，话不多说直接开始，喜欢的自行部署！

tengfei_down (45).webp

代码部署

将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML即可！

<div class="zhankr-zx">
<span>NEWS</span>
<div class="zhankr-zx-n">
<strong>最新</strong>
<strong>通知</strong>
</div>
</div>
<div class="zhankr-zx-n">
<center>
<strong>如果您邮箱是QQ邮箱,注册或登录时邮箱收不到验证码</strong><br>
<strong>可能是近期官方邮件发送过多,请查看QQ邮箱-垃圾箱</strong>
</center>
</div>
<style>
.zhankr-zx {
position: relative;
margin-bottom: 18px;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
line-height: 1;
}
.zhankr-zx:before {
margin-right: 10px;
}
.zhankr-zx:after {
margin-left: 10px
}.zhankr-zx:before, .zhankr-zx:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
border-radius: 50%;
}
.zhankr-zx span {
font-family: Futura;
background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
-webkit-background-clip: text;
color: transparent;
font-size: 49px;
letter-spacing: 5px;
display: inline-block;
font-weight: 700;
}.zhankr-zx .zhankr-zx-n {
font-size: 20px;
}
.zhankr-zx .zhankr-zx-n strong {
display: block;
font-size: 20px;
background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
-webkit-background-clip: text;
color: transparent;
}
.HhcatboxDes {
position: absolute;
opacity: 0;
z-index: 1;
align-items: center;
display: flex;
font-size: 16px;
height: 180px;
justify-content: center;
width: 100%;color: #fff;
font-weight: 600;
background: #f95491;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: translateY(100%);
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.HhCooltitle {
margin-top: 10px
}
</style>

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 添加最新通知模块小工具

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn