前言说明

首先在发此帖子之前，我先声明一下，我今天在逛博客的时候，留意到别人的侧边存在这种样式，然后我就直接把它给扒了下来，就算开启了防 F12 也毫无用处，照样能成功扒取，喜欢的人请按教程使用，当然样式也可用于其他主题，不仅限于子比主题！

给子比主题侧边加一个微信公众号扫码翻转效果插图
一款实用美观的可翻转显示的微信公众号

教程开始

1、这个效果主要就是靠CSS，WordPress的话可以使用自定义HTML小工具，把下面的代码放至自定义HTML小工具里即可

<div class="card-widget" id="card-wechat" onclick="window.open('https://www.360mb.net/wechat/index.html');">
    <div id="flip-wrapper">
      <div id="flip-content">
      <div class="face"></div>
      <div class="back face"></div>
    </div></div></div>
<link rel="stylesheet" href="/wp-content/themes/zibll/css/style.css" rel="external nofollow"  rel="external nofollow"  type="text/css">

参数说明

1、上述代码中的“/wp-content/themes/zibll/css/style.css”就是CSS样式，文件见下载包。

2、上述代码中“https://www.360mb.net/wechat/index.html”就是下载包中的扫码页面，自己上传后替换为自己的，也就是点击后的调整页面，如下图。

 

给子比主题侧边加一个微信公众号扫码翻转效果插图

  • wechatface.png（翻转前图片）
  • wx_gzh.png（翻转后图片）
  • gzh_cover.png（微信Logo背景，也可替换为其他的如QQ、Telegram等）

2、现在的默认背景颜色是绿色的，如需修改掉这个绿色可以在css里搜索“#57bd6a”，适配自己的主题。

1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定，不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益，请联系我们进行处理。