子比美化 第17页
标签
排序
2026-04-06
密码验证
子比主题 – 文章卡片弹窗美化样式(阿呆赞助)-识趣者资源
子比美化

美化子比主题 – 文章卡片弹窗美化样式(阿呆赞助)

本文介绍了如何美化文章卡片弹窗样式，灵感来源于图酷设计，由阿呆日记原创。通过CSS和JavaScript代码，实现了弹窗背景、容器、关闭按钮、内容、图片、信息、标题和按钮的样式设计。同时，还提供了响应式调整，确保在不同设备上都能良好显示。教程详细介绍了如何将代码应用到后台自定义CSS和JS中，实现个性化的文章卡片弹窗效果。 预览图 [hidecontent type="password" password="ly19960318" img_id="" img_url="" desc=""] 放到后台自定义css .custom-popup-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.45);z-index:9999;justify-content:center;align-items:center}.custom-popup-container{background-color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:600px;width:90%;position:relative;overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-popup-close{position:absolute;top:15px;right:15px;background:rgba(0,0,0,.3);border-radius:50%;width:36px;height:36px;display:flex;justify-content:center;align-items:center;border:none;font-size:20px;cursor:pointer;color:#fff;z-index:10;transition:all .5s ease}.custom-popup-close:hover{background:rgba(0,0,0,.6);transform:rotate(360deg)}.custom-popup-container{background-color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:600px;width:90%;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;display:flex;flex-direction:column}.custom-popup-content{display:flex;flex-direction:column;width:100%}.custom-popup-image-container{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;margin:0!important;padding:0!important}#custom-popup-image{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important;margin:0!important;padding:0!important;display:block!important}.dai-soft-popup-waves{position:absolute!important;bottom:-1px!important;left:0!important;width:100%!important;height:15vh!important;min-height:50px!important;max-height:80px!important;z-index:2!important;pointer-events:none!important;margin:0!important;padding:0!important}.custom-popup-info{height:135.75px!important;flex-shrink:0;box-sizing:border-box;padding:15px 30px 20px 30px;display:flex;flex-direction:column;justify-content:center;z-index:3;position:relative;background-color:#fff;margin-top:-1px}#custom-popup-title{font-size:22px;margin-top:0;margin-bottom:18px;color:#333;font-weight:700;line-height:1.4;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-popup-buttons{display:flex;justify-content:center;gap:12px}.custom-popup-button{min-width:138px;border-radius:8px;padding:10px 18px;font-size:15px;font-weight:600;text-align:center;text-decoration:none;transition:all .3s ease;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.left-button{background:linear-gradient(135deg,#fd7a64 10%,#fb2d2d 100%);color:#fff!important;border:none;box-shadow:0 4px 12px rgba(251,45,45,.25)}.right-button{border:1px solid var(--main-border-color,#d8dde5);color:var(--focus-color,#4b5563)!important;box-shadow:none;transition:background-color .2s ease,border-color .2s ease,color...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 9天前
#子比美化
 2025-12-13
评论可见
子比主题 – 文章上方推广样式代码-识趣者资源

子比主题 – 文章上方推广样式代码

这是一款子比推广样式代码，很简约的一款，并且修复了css一些问题，并且这款适配了昼夜和手机端，喜欢的自行部署吧！ [hidecontent type="reply"] 定位：WP后台–>>外观–>>自定义HTML，将下面的代码放里面即可，建议放到：文章页-主内容上面 <style> .tengfei-info-module-box,.tengfei-info-module-box *{margin:0 !important;padding:0 !important;font-size:1em !important;border:0 !important;width:auto !important;height:auto !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;list-style:none !important;max-width:none !important;max-height:none !important;line-height:1 !important;background:0 0 !important}.tengfei-info-module-box{margin:1.5em 0 .8em 0 !important;max-width:100% !important;margin-left:auto !important;margin-right:auto !important}.tengfei-info-module-btn{display:inline-flex !important;height:2.4em !important;align-items:center !important;justify-content:center !important;padding:0 1em !important;border-radius:4px !important;background-color:var(--tengfei-module-color1)...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 4个月前
#子比美化
 2025-12-13
评论可见
子比主题 – 顶部悬挂样式（两款）-识趣者资源

子比主题 – 顶部悬挂样式（两款）

这是一篇子比主题顶部悬挂的样式代码，为什么说是两款，因为第一款是一直挂在了顶部而不是跟着鼠标滑动走的，第二款就是鼠标滑动那么悬挂也跟着走，所以就两款，非常的实用，喜欢的自行部署！ 第一款 第二款 代码部署 [hidecontent type="reply"] 这里只有CSS不一样，HTML代码是一样的，所以先把HTML代码放上去，我代码里面已经提供了图片，那么如果你有图片可以放上自己的图片即可，建议用第二款，毕竟跟随还是比较美观的！ HTML代码 放到：子比主题–>>自定义头部HTML代码即可！ <div class="tengfei_hang"></div> 注意：第一款是一直在顶部不跟随，第二款是跟随鼠标滑动的，下面代码放到：自定义CSS样式即可！ 第一款第二款 @keyframes lampLine-38cc6824 { 0% { transform: rotate(10deg) } to { transform: rotate(-10deg) } } .tengfei_hang { width: 150px; height: 200px; display: inline-block;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 4个月前
#子比美化
 2025-12-22
评论可见
子比主题 – 自定义HTML小工具_扩展版-识趣者资源

子比主题 – 自定义HTML小工具_扩展版

这是一款子比主题自定义HTML小工具扩展，WP自带的有自定义html，但是只有一个输入代码的，这款小工具就是方便自己放自己的代码，并且功能加了一点，喜欢的自行部署吧！ [hidecontent type="reply"] 跟着我的教程走，别走偏了，先看我怎么说的，再去操作，这个小工具跟我以前发的教程一模一样首先我们第一步：/wp-content/themes/zibll/func.php文件，如果没有这个文件自己创建在子比目录创建一个，创建之后记得加php头，要不然会报错！加如下面的代码，我会详细说这个 $widgets_files = array( 'tengfei_html.php', /*小工具文件名*/ ); foreach ($widgets_files as $file) { require get_template_directory() . '/tengfei/widgets/' . $file; } 将上面的代码放到/wp-content/themes/zibll/func.php文件，都是一样的，看上面的代码，别看懵逼了，我们要明白这个：tengfei_html.php这个代码，这个代码就是代表一个小工具的名字，相当于就是用上面的代码调用的，就是如果想加第二个小工具，那就是在tengfei_html.php这个代码下面加一行其他小工具的别名，我说的已经很仔细了，不懂问站长，文件放底部 附件上传到：/wp-content/themes/zibll解压即可！ 子比主题自定义HTML小工具扩展版下载提取码WC5L [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 4个月前
#子比美化
 2026-01-19
400积分
子比主题美化 – 首页排名榜样式美化-识趣者资源

子比主题美化 – 首页排名榜样式美化

首先我们要知道这个排名榜一共是三个文件代码，HTML、CSS和图片，话不多说直接开始(适配夜间） [hidecontent type="payshow"] <div id="syphb" class="container list clearfix"> <div class="ranking-item"> <a class="top-icon js-rank-bottom1">子比美化</a> <div class="class-box"> <?php query_posts('cat=3&showposts=5&orderby=views'); ?> <?php while (have_posts()) : the_post(); ?> <a class="class-item js-rank" href="<?php esc_url(the_permalink()); ?>" rel="external nofollow" rel="external nofollow" rel="external...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 2个月前
#子比美化
 2026-01-27
评论可见
子比主题-网站底部添加“百度收录数量”和“搜狗收录数量”精准代码-识趣者资源

子比主题-网站底部添加“百度收录数量”和“搜狗收录数量”精准代码

现在做站会有些站长把收录数量显示在网站底部，一来自己可以知道网站收录数量多少，二来申请友链的伙伴们也知道你网站有多少收录，不过大多数人都是用别人的API接口来实现，假如别人的API接口失效了，自己网站就多了个404的JS文件，这样会导致网站打开速度慢了一点点！这里直接把接口源码分享了！ 自建PHP百度收录数量API查询源码 在网站新建一个php文件，把下面的代码复制进去 API接口的源码，查询实例：你网站域名/文件.php?domain=查询域名 [hidecontent type="reply"] <?php /* Plugin Name: XY-百度收录量 Description: XY-根据域名返回百度收录量 */ $domain = (isset($_GET['domain']))?$_GET['domain']:$_POST['domain']; if(empty($domain)) echo '查询域名不能为空'; $count = baiduSL ($domain); if(!isset($count)) showjson(array('code'=>200502,'msg'=>'查询失败，请重试！')); if(!$count) $count = 0; $result=array( 'code'=>1, 'domain'=>$domain, 'data'=>$count );...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 2个月前
#子比美化
 2026-01-27
500积分
子比主题美化 - 脚页高级修改-识趣者资源

子比主题美化 – 脚页高级修改

美化简介 今天我在翻网站的时候，发现了一个很好看的尾页，就给扒了下来并且修复了一下，可能会与某些东西会有些冲突，下面是效果图 美化效果 代码教程 [hidecontent type="payshow"] 打开本主题根目录进入footer.php把下面的复制进去 <?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2023-09-16 13:53:11 * @Email : 770349780@qq.com * @Project : Zibll子比主题 *...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 2个月前
#子比美化
 2026-01-30
800积分
子比主题-自定义会员开通展示 引导区块-识趣者资源

子比主题-自定义会员开通展示 引导区块

此代码可以直接调用会员开通弹窗、增加红色边框描边 代码部署 代码放至——模块配置——底部全区块或文章内容上方、文章页顶部全区块——自定义 HTML [hidecontent type="payshow"] <div class="tf-one-home-homevip" style="background-image: url(https://s41.ax1x.com/2026/01/30/pZf1M2d.png);"> <div class="one-container wrapper"> <div class="tf-one-home-title"> <span>会员尊享权益圈子</span> <p>成为我们的VIP会员，尊享无限免费下载使用，更享受全面的服务与福利</p> </div> <div class="tf-one-home-homevip-box one-grid-ceosmls one-grid"> <div id="onecad-id-1" class="tf-one-width-1-1 tf-one-width-1 b2-radius"> <div class="tf-home-homevip-boxmk tf-one-dongtai tf-one-background-default b2-radius "> <div class="">...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 2个月前
#子比美化
 2026-02-07
评论可见
子比主题-下雪特效悬浮按钮-识趣者资源

子比主题-下雪特效悬浮按钮

效果 教程 [hidecontent type="reply"] <style> /* 悬浮按钮样式 */ .snow-control { position: fixed; bottom: 30px; right: 30px; z-index: 1000; } .snow-toggle { width: 60px; height: 60px; background: linear-gradient(135deg, #4facfe, #00f2fe); border-radius: 50%; display: flex; align-items: center;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-02-08
评论可见
子比主题 – 多栏目文章小工具栏目标题居中显示-识趣者资源

子比主题 – 多栏目文章小工具栏目标题居中显示

演示图 教程 [hidecontent type="reply"] 原来是在左侧，加上这个代码可居中显示 .widget-tab-post.style-card.index-tab.relative-h .relative.mb20{text-align:center;} [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
1…1516171819…36跳转