17713433920 info@mac163.com

纯css打造漂亮的wordpress在线客服,实现效果如下:

wordpress在线客服

.sidebar{
position: fixed; right: 0; top: 50%; margin-top: -80px; width: 55px; background: rgba(0,0,0,0.3); padding: 12px 0 0 0; border-radius:8px 0 0 8px; z-index:999999;
}
.sidebar li{
height: 50px; width: 160px; padding-left: 17px; border-radius:8px 0 0 8px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.sidebar li img{
display: block;
}
.sidebar li:hover{
margin-left: -105px; background: rgba(0,0,0,0.6);
}
a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline;}
li{list-style:none;}

div显示层

<div class="sidebar">
<ul>
<li><a href="tencent://message/?uin=420372358&Site=bdesign.com.cn&Menu=yes" target="_blank"><img src="imgs/img58.png"></a></li>
<li><a href="#"><img src="imgs/img59.png"></a></li>
<li><a href="#"><img src="imgs/img611.png"></a></li>
<li><a href="#"><img src="imgs/email.png"></a></li>
<li><a href="#hero"><img src="imgs/img60.png"></a></li>
</ul>
</div>

纯css打造漂亮的wordpress在线客服完整实例:纯CSS在线客服

结合wordpress主题实现纯css在线客服,这种效果可以避免坑爹的jquery冲突问题。直接在实例的代码copy到主题的footer.php

或者主题选项都可以。


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部