#精品
子比主题美化丨网站侧边栏添加微信&QQ联系动态翻转小工具

2024-09-18 1,050

前言:

这个是一个用于放置在侧边栏的的样式,不仅限与子比主题,样式已经优化调整至通用,也可以用于其他主题,具体你们自行调试。

我放不放 GIF 动态演示图了,具体可以看下图或者觅知的首页站点

效果图:

实现逻辑通过 css 样式进行控制的的,当然这上面的两种颜色也不局限在绿色和蓝色,你们可以按照我提供压缩包修改 turn.css 当中的颜色代码

注意!!!:

安装教程:

  1. 下载我提供的源码
  2. 解压至子比主题目录下:路径/wp-content/themes/zibll/
  3. 打开文件中的:侧边栏小工具 html 代码.php,里面有小工具代码或者看文章下方的代码,一个小工具一个,别一次性全给复制上去了。
  4. 小工具添加路径:外观—小工具—自定义 HTML
  5. 图片中的二维码自行上传稿定设计或者 PS 直接覆盖掉二维码上去就好了。

在线 PS 网址推荐:

  1. 稿定设计在线 PS:https://ps.gaoding.com
  2. photopea 在线 PS:https://www.photopea.com
子比主题美化丨网站侧边栏添加微信&QQ联系动态翻转小工具

小工具代码:

子比主题美化丨网站侧边栏添加微信&QQ联系动态翻转小工具
<!--微信公众号翻转绿色样式-->
<div class="wx-card-widget" id="wx-card-wechat" onclick="window.open('/wp-content/themes/zibll/mizhi_ui/gzh_turn/wxgzh.html');"><!--点击跳转公众号单页-->
<link rel="stylesheet" href="/wp-content/themes/zibll/mizhi_ui/gzh_turn/turn.css" rel="external nofollow"  rel="external nofollow" >
<div id="wx-flip-wrapper">
<div id="wx-flip-content">
<div class="wx-face"></div>
<div class="wx-back wx-face"></div>
</div></div></div>
<!--微信公众号翻转绿色结束-->

<!--QQ 联系翻转蓝色样式-->
<div class="qqnew-card-widget" id="qqnew-card-wechat" onclick="window.open('https://admin.qidian.qq.com/static_proxy/b2b-qq/wpa-link/index.html#/person?uin=2319281411');"><!--点击跳转公众号单页-->
<link rel="stylesheet" href="/wp-content/themes/zibll/mizhi_ui/gzh_turn/turn.css" rel="external nofollow"  rel="external nofollow" >
<div id="qqnew-flip-wrapper">
<div id="qqnew-flip-content">
<div class="qqnew-face"></div>
<div class="qqnew-back qqnew-face"></div>
</div></div></div>
<!--QQ 联系翻转蓝色样式结束-->

下载地址:

百度网盘:https://pan.baidu.com/s/1afbHq82moV3wTw2OwQWT7Q?pwd=85cw

收藏 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

版权声明 1 零玖吧
2 https://www.09b.cn
3 QQ68857537
4
5 访
6
7

要想程序运行完整,离不开BUG的辅助

常见问题
  • 本站所有资源仅供学习交流使用请勿商业运营,严禁使用零玖吧上的资源从事违法,侵权等任何非法活动!
查看详情
  • 是的,开通之后所有资源都可以下载!
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务