子比主题美化 – 在线投稿联系方式小工具模块

效果演示

实用教程

1. 将下面的代码添加在 WordPress 后台小工具，效果展示是一样的
2. 添加路径：后台 >> 外观 >> 小工具 >> 自定义 HTML >> 选择你需要放的位置

3. <!-- @Url: blog.wmr7.com -->
   <div class="zib-widget widget_text">
   <div id="update_version">
   <a href="/" target="_blank" rel="noopener"><img title="阿七源码" src="https://blog.wmr7.com//wp-content/themes/zibll-child/images/tougao.webp" alt="图片" style="border-radius:5px;"></a>
   <a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=admin@wmr7.com" target="_blank" style="background-image: linear-gradient(120deg, #3ca5f6 0%, #a86af9 100%);" rel="noopener">站长邮箱</a>
   <a class="cms_link" href="https://blog.wmr7.com/newposts" target="_blank" style="background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);" rel="noopener">在线投稿</a>
   <a class="grid_link" href="https://blog.wmr7.com/links" target="_blank" style="background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);" rel="noopener">友情链接</a>
   </div>
   <div>
   <hr>
   </div>
   </div>

    

4. 阿七源码这里是添加在文章页侧边栏

自定义CSS

<!-- @Url: blog.wmr7.com -->
<style type="text/css">
#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}
</style>

修改代码中的链接以及图片地址