插件介绍
源码猫用的就是这个插件,话不多说,自己去看效果就行。
使用教程
小工具-自定义html即可。
代码:
<div class="multi-ads-container">
<!-- 广告1 -->
<div class="ad-item">
<div class="ad-header">
<h3 class="ad-title">黄金广告位招租</h3>
<span class="ad-tag">广告</span>
</div>
<p class="ad-desc">15R/月 68R/年 先到先得</p>
<a href="https://www.ymcat.cn/广告合作" class="ad-link">查看详情 →</a>
</div>
<!-- 广告2 -->
<div class="ad-item">
<div class="ad-header">
<h3 class="ad-title">黄金广告位招租</h3>
<span class="ad-tag">广告</span>
</div>
<p class="ad-desc">15R/月 68R/年 先到先得</p>
<a href="https://www.ymcat.cn/广告合作" class="ad-link">查看详情 →</a>
</div>
<!-- 广告3 -->
<div class="ad-item">
<div class="ad-header">
<h3 class="ad-title">黄金广告位招租</h3>
<span class="ad-tag">广告</span>
</div>
<p class="ad-desc">15R/月 68R/年 先到先得</p>
<a href="https://www.ymcat.cn/广告合作" class="ad-link">查看详情 →</a>
</div>
</div>
<style>
.multi-ads-container {
width: 100%;
box-sizing: border-box;
padding: 0;
margin: 0 0 20px 0;
}
.ads-section-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.ad-item {
background: #fff;
border-radius: 6px;
padding: 15px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
transition: all 0.2s ease;
}
.ad-item:hover {
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.ad-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.ad-title {
font-size: 15px;
margin: 0;
color: #2d3748;
line-height: 1.3;
}
.ad-tag {
font-size: 11px;
color: #888;
background: #f5f5f5;
padding: 2px 6px;
border-radius: 3px;
}
.ad-desc {
font-size: 13px;
color: #666;
margin: 0 0 10px 0;
line-height: 1.5;
}
.ad-link {
font-size: 13px;
color: #2563eb;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.ad-link:hover {
color: #1d4ed8;
text-decoration: underline;
}
/* 避免与主题样式冲突 */
.multi-ads-container * {
box-sizing: border-box;
font-family: inherit;
}
</style>
![图片[1]-子比主题-源码猫同款文章页侧边栏文字广告-7福源码网](https://7fym.com/wp-content/uploads/2025/11/image-8.png)
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END









暂无评论内容