QQ在线客服悬浮代码

分享两个漂亮的网站固定位置的客服悬浮代码,类似于QQ网页客服聊天代码,一个是固定在左下角的, 另一个是固定在网页右边居中的位置,都很美观。 两端代码不一定要都用于QQ聊天链接,也可以设置转跳或者是其他网页功能, 具体干什么就看大家自己了,这里无作为就只是分享一下代码而已。

网站左下角悬浮代码

首先来看看演示,如下图所示,在网站的左下方会有一个悬浮的东西, 点击即可转跳到指定的链接,如果你想在吃出作为QQ聊天链接就添加你到QQ网页聊天代码。

TIM20170710114946 QQ在线客服悬浮代码

请去除代码中的中文,代码:

/* Name: qq悬浮客服代码无作为分享(wuzuowei.net) */ <style> .site-contact{position:fixed;left:40px;bottom:40px;z-index:999}.site-contact .btn{border-radius:50px;box-shadow:1px 3px 0 rgba(0,0,0,0.1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.site-contact .btn:hover{position:relative;top:1px}@media (max-width: 544px){.site-contact{display:none;left:20px;bottom:20px}} </style> <div class="site-contact"> <a class="btn btn-success" title="QQ 123456" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovPC9zcGFuPjxzcGFuIGNsYXNzPQ=="pun">/wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes">QQ咨询</a> </div>

大家把QQ改成自己的就可以了,或者直接替换http代码为转跳网址也行。 这个代码有个缺点,就是如果你的网站源码手机和电脑显示的是一模一样就没事, 如果你手机是自适应的,可能会出现手机端无法显示的情况,大家自己测试吧。

右下角居中QQ悬浮代码

来分享下我们的第二款代码,推荐使用这个,有QQ美化的演示,直接显示的就是QQ聊天:

TIM20170710114946 QQ在线客服悬浮代码

代码:

<div class="side-btn"> <ul> <li> <a class="contact goTo js-contact" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes" title="联系我们"></a> </li> </ul> </div>  /*css样式,代码源于无作为-wuzuowei.net */ <style> .side-btn{position:fixed;bottom:100px;right:5px;width:75px;height:160px;z-index:999} .side-btn .goTo{width:75px;height:75px;text-align:center;display:block;text-decoration:none} .side-btn ul>li{position:relative;height:75px} .contact{background:url("http://wx3.sinaimg.cn/mw690/d83cce73gy1fg1g9zo2lgj202308c3yh.jpg") no-repeat 0 -150px} .side-btn .contact:hover{background:url("http://wx3.sinaimg.cn/mw690/d83cce73gy1fg1g9zo2lgj202308c3yh.jpg") no-repeat 0 -225px} </style>

大家直接替换QQ或者改成链接即可,图片可以随意替换,默认的是QQ的图标。

这里也附图片上透明文件,因为图片上面使用的是外链,直接就给它添加上了白色的背景了。

使用方法

以上两段代码大家想要在那个页面使用就放在那个页面就好了,不冲突,如果是全站调用,那就直接放到foot.php文件里面即可。

 

TIM20170710114946 QQ在线客服悬浮代码

 

发表评论

电子邮件地址不会被公开。

扫描立即分享本页
QQ在线客服悬浮代码