效果图展示

之前有初一手搓的区块代码，原地址

https://www.zibll.com/forum-post/28416.html

我修正了下，让界面显示更加美观

下方代码放置后台，外观→小工具→区块或者自定义HTML代码都可以，把推广链接修改成你自己的即可

然后添加到你想显示的位置

<div class="zib-widget">
  <img title="子比主题" src="https://oss.zibll.com/zibll.com/2021/12/%E8%B4%AD%E4%B9%B0%E9%A1%B5-%E5%B9%BB%E7%81%AF%E7%89%87.jpg" class="radius8 hover-expand">
</div>
<div class="themeinfo-content">
  <!-- 内容 -->
</div>

<style>
  .radius8 {
    border-radius: 8px; /* 如果您想要圆角边框 */
  }
  .hover-expand {
    transition: transform 0.3s ease; /* 过渡效果 */
  }
</style>

    <div class="theme-info text-center">
      <div class="mt30 em14 padding-w10 font-bold mb30"style="font-size: 30px;">子比主题</div>
    </div>
    <div class="ml10">
      简约优雅的设计风格、模块化组件、商城支付系统全面的前端功能、深度SEO优化、专注阅读体验
    </div>
    <div class="price-box">
      <div class="px13 text-center mt10 mb10">
        <b class="em3x">
          <span class="pay-mark">￥</span>559</b>
        <div class="inline-block ml10 text-left">
          <badge>
            <i class="fa fa-fw fa-bolt">
            </i>特别特惠</badge>
          <br>
          <span class="original-price" title="原价 699">
            <span class="pay-mark">￥</span>699</span>
        </div>
      </div>
    </div>
    <a class="balance-charge-link user-auth-apply but jb-red padding-lg btn-block" href="javascript:;" data-toggle="modal" data-target="#modal_payzibll">立即购买</a>
  </div>
</div>
<div class="modal fade" id="modal_payzibll" tabindex="-1" role="dialog" style="display: none;">
  <div class="modal-dialog modal-sm" style="margin-top: 330.5px;" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div style="padding: 1px;">
          <div class="modal-colorful-header colorful-bg jb-cyan">
            <button class="close" data-dismiss="modal">
              <svg class="ic-close" aria-hidden="true">
                <use xlink:href="#icon-close">
                </use>
              </svg>
            </button>
            <div class="colorful-make">
            </div>
            <div class="text-center">
              <div class="em2x">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-share">
                  </use>
                </svg>
              </div>
              <div class="mt10 em12 padding-w10">前往</div>
            </div>
          </div>
          <div>
            <div class="ml10">
              <p class="c-red">当前正在前往子比主题官网，从本链接前往将享受立减￥10元，购买后可凭订单号联系站长获取30元返利！</p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-buts but-average">
        <a type="button" data-dismiss="modal" class="but" href="javascript:;">取消</a>
        <a type="button" class="but c-red" href="https://www.zibll.com/?ref=36145">立即前往</a>
      </div>
    </div>
  </div>
</div>