当前位置 鱼摆摆网 > 教程 > 有赞知识库 >
有赞【代码浮窗新玩法】如何把 “代码” 玩到极致&HTML5教程
作者:肖钦 2020-02-13 14:06重要提示:此类插入代码操作有风险,无代码基础者请谨慎使用。
悬浮窗口,想换就换,还改就改。
首先,你得要会把有赞给的那些悬浮代码上到微页面去,所以我先教大家如何制作简单的浮窗
我们先看看效果图
(本节浏览器google)
在这之前,我们首先要去开通QQ的跳转授权,地址http://shang.qq.com/v3/index.html
点进去后授权
具体步骤如下:
1.新建一个为页面
2.创建一个富文本
3.我们在富文本随便的输入几个字例如“马生”,右键点击“审查元素”
4.然后按CTRL+F,输入【contenteditable】,会有黄色框出现,我们点击“小三角”展开它,会看到“马生”两个字
5.右键点击代码段,选择【Edit as HTML】
6.然后把代码“<p>马生</p>”删减掉。换成以下代码(数字是我们的QQ,“召唤掌柜” 是可以换的)
<div class="custom-richtext">
<p><a href="http://wpa.qq.com/msgrd?v=3&uin=94484480&site=qq&menu=yes" style=" z-index:9999; text-decoration:none; font-weight:bold; position: fixed; z-index: 999; right: -6px; bottom: 220px; display: inline-block; width: 20px; border-top-left-radius: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 10px; color: white; font-size: 17px; line-height: 17px; box-shadow: rgb(102, 102, 102) 0px 0px 5px; word-wrap: break-word; padding: 8px 6px; border: 2px solid white; background: rgb(242, 12, 12);">召唤掌柜</a></p></div>
7.然后我们,点击“富文本”的随便一个地方,浮窗就出来了,出现了以下两个窗口才算成功喔,不然保存后不会出现浮窗效果的
如何改字?我们在刚刚那窜代码中找到“召唤掌柜”修改成我们需要修改的文字就好了
重点在这里:我们会看到这里有一串数值,这是我们自己的QQ,只要修改我们自己的QQ,顾客在点击我们的浮窗的时候,就可以自己转跳到聊天的页面(94484480修改成我们自己的QQ)
(提示一下:一个富文本最好是用一个浮窗,多个富文本格式可以实现多浮窗效果)
(提示一下:如何实现多页面浮窗效果呢?我们可以在公共广告里设置浮窗喔)
- 全部评论(0)



