Zibll侧边栏渐变标签带图标代码分享「子比主题」

这是一款子比主题的侧边栏右侧标签渐变过度美化样式，这款样式带了图标加渐变标签配上文字，还是比较不错的，喜欢的自行部署吧！

截图预览

代码部署

No.1代码

No.2代码

<div class="textwidget custom-html-widget"><div style="display:flex;flex-wrap:wrap;gap:5px;width:310px">
  <!-- 双列布局 - 每行两个项目 -->
  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#6b8cff,#8eabff);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      🔥 16T爆款游戏合集
    </a>
  </div>

  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#4dd091,#6fe0aa);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      🛡️ 2T隐盟独家资源
    </a>
  </div>

  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#b173e6,#c28ef0);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      🌪️ 2T游戏宝藏
    </a>
  </div>

  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#ffa86b,#ffba8e);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      💎 1T精选游戏库
    </a>
  </div>

  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#4facfe,#00f2fe);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      🏆 14T 3A大作全集
    </a>
  </div>

  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#ffd700,#ffdf80);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      ⚔️ 1T DNF怀旧端游
    </a>
  </div>
  
  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#ff6b8b,#ff8e9e);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      🚨 51波少1T资源
    </a>
  </div>
  
  <!-- 新增项目：80后喜欢的游戏 -->
  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#4dd0b5,#6fe0c3);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      🕹️ 80后喜欢的游戏
    </a>
  </div>
</div></div>

No.3代码

<div class="textwidget custom-html-widget"><div style="display:flex;flex-wrap:wrap;gap:5px;width:310px">
  <!-- 双列布局 - 每行两个项目 -->
  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#9b6bff,#b28eff);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      🐉 龙之谷开服公告
    </a>
  </div>

  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#ff6b6b,#ff8e8e);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      🚀 高速下载器
    </a>
  </div>

  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#6bd4ff,#8edcff);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      ⚔️ 龙之谷60附魔
    </a>
  </div>

  <div style="width:calc(50% - 2.5px);height:25px;background:linear-gradient(135deg,#ff6bd4,#ff8edc);border-radius:8px;position:relative">
    <a href="https://www.lhndy.cn" style="position:absolute;width:100%;height:100%;display:flex;padding:0 8px;align-items:center;color:white;text-decoration:none;font:bold 13px Arial;transition:.3s">
      ☁️ 道言云服务器
    </a>
  </div>
</div></div>

添加方式

定位：WP后台–>>外观–>>小工具–>>自定义HTML，代码里面没加H2标题，在子比自带标题打上文字即可，所有的渐变标签颜色，自己可以根据颜色代码调整。