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

前言说明

首先在发此帖子之前，我先声明一下，我今天在逛博客的时候，留意到别人的侧边存在这种样式，然后我就直接把它给扒了下来，就算开启了防 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”，适配自己的主题。