效果展示

添加 CSS 样式和 HTML 代码即可如下

教程开始

#1

 子比主题设置 >> 页面&显示 >> 底部页脚 >> 板块二，添加以下 HTML 代码：

<!--网站底部按钮美化开始 by 墨染云天 www.zcxsmart.cn-->
<div class="huliku-badge">
  <span class="badge-subject">申请</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/links" target="_blank">
    <span class="badge-value bg-red">友情链接</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">站点地图</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/sitemap.xml" target="_blank">
    <span class="badge-value bg-green">Sitemap</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">用户协议</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/yhxy" target="_blank">
    <span class="badge-value bg-orange">UserAgreement</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">隐私政策</span>
   <a style="color:#fff" target="_blank" href="https://www.zcxsmart.cn/yszc">
    <span class="badge-value bg-blue">Privacy</span>
  </a>
</div>
<!--网站底部按钮美化结束 by 墨染云天 www.zcxsmart.cn-->
<!--网站底部按钮美化开始 by 墨染云天 www.zcxsmart.cn-->
<div class="huliku-badge">
  <span class="badge-subject">申请</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/links" target="_blank">
    <span class="badge-value bg-red">友情链接</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">站点地图</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/sitemap.xml" target="_blank">
    <span class="badge-value bg-green">Sitemap</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">用户协议</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/yhxy" target="_blank">
    <span class="badge-value bg-orange">UserAgreement</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">隐私政策</span>
   <a style="color:#fff" target="_blank" href="https://www.zcxsmart.cn/yszc">
    <span class="badge-value bg-blue">Privacy</span>
  </a>
</div>
<!--网站底部按钮美化结束 by 墨染云天 www.zcxsmart.cn-->
<!--网站底部按钮美化开始 by 墨染云天 www.zcxsmart.cn-->
<div class="huliku-badge">
  <span class="badge-subject">申请</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/links" target="_blank">
    <span class="badge-value bg-red">友情链接</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">站点地图</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/sitemap.xml" target="_blank">
    <span class="badge-value bg-green">Sitemap</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">用户协议</span>
   <a style="color:#fff" href="https://www.zcxsmart.cn/yhxy" target="_blank">
    <span class="badge-value bg-orange">UserAgreement</span></a>
</div> |
<div class="huliku-badge">
  <span class="badge-subject">隐私政策</span>
   <a style="color:#fff" target="_blank" href="https://www.zcxsmart.cn/yszc">
    <span class="badge-value bg-blue">Privacy</span>
  </a>
</div>
<!--网站底部按钮美化结束 by 墨染云天 www.zcxsmart.cn-->

#2

子比主题设置 >> 自定义代码 >> 自定义 CSS 样式：