无作为
不仅仅是一种态度!

QQ在线客服悬浮代码

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

网站左下角悬浮代码

首先来看看演示,如下图所示,在网站的左下方会有一个悬浮的东西, 点击即可转跳到指定的链接,如果你想在吃出作为QQ聊天链接就添加你到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="https://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聊天: 代码:

<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("https://tva1.sinaimg.com/mw690/d83cce73gy1fg1g9zo2lgj202308c3yh.jpg") no-repeat 0 -150px}
.side-btn .contact:hover{background:url("https://tva1.sinaimg.com/mw690/d83cce73gy1fg1g9zo2lgj202308c3yh.jpg") no-repeat 0 -225px}
</style>

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

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

使用方法

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


历史上的今天:
赞(28) 打赏
所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » QQ在线客服悬浮代码

留下评论 抢沙发

无作为-不仅仅是一种态度

登录/注册广告合作

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏