请选择 进入手机版 | 继续访问电脑版

有赞新零售社区

发帖
运营杂谈»【代码浮窗新玩法】如何把 “代码” 玩到极致&HTML5教程

【代码浮窗新玩法】如何把 “代码” 玩到极致&HTML5教程

马生OL 2015-07-26 70303 浏览 626 评论 | [显示全部楼层] [打印]  
重要提示:此类插入代码操作有风险,无代码基础者请谨慎使用。
悬浮窗口,想换就换,还改就改。

0920192546-0.png
首先,你得要会把有赞给的那些悬浮代码上到微页面去,所以我先教大家如何制作简单的浮窗
我们先看看效果图
图片1.jpg
本节浏览器google

在这之前,我们首先要去开通QQ的跳转授权,地址http://shang.qq.com/v3/index.html
37C3.tmp.jpg
点进去后授权
3A46.tmp.jpg

具体步骤如下:
1.新建一个为页面
图片2.png
2.创建一个富文本
图片3.png
3.我们在富文本随便的输入几个字例如“马生”,右键点击“审查元素”
图片4.png
4.然后按CTRL+F,输入【contenteditable】,会有黄色框出现,我们点击“小三角”展开它,会看到“马生”两个字
图片5.png
5.右键点击代码段,选择【Edit as HTML】
图片6.png
图片7.png
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.然后我们,点击“富文本”的随便一个地方,浮窗就出来了,出现了以下两个窗口才算成功喔,不然保存后不会出现浮窗效果的

图片8.png

如何改字?我们在刚刚那窜代码中找到“召唤掌柜”修改成我们需要修改的文字就好了
图片9.png

重点在这里:我们会看到这里有一串数值,这是我们自己的QQ,只要修改我们自己的QQ,顾客在点击我们的浮窗的时候,就可以自己转跳到聊天的页面(94484480修改成我们自己的QQ
图片12.png
(提示一下:一个富文本最好是用一个浮窗,多个富文本格式可以实现多浮窗效果)
(提示一下:如何实现多页面浮窗效果呢?我们可以在公共广告里设置浮窗喔)

悬浮窗口

如何改成我们自己想要的图片效果呢

首先我们得学会以上的教程

话不多说

预览!

(随便做的,做的有点丑,勿喷!)
扫一扫
liantu.png
本节浏览器google
具体步骤如下:
1.新建一个为页面
图片2.png

2.创建一个富文本
图片3.png
3.插入一张你要悬浮的图片(图片的尺寸建议78*117像素)
图片4.png
4.按F12审查元素.我们会看到一个放大镜的图标,点击它,然后把它移到我们的图上去
图片5.png
5.点击我们的图片,右键点击代码段,选择【Edit as HTML】,把代码复制下来(在这里我要告诉大家,图片它是也是一连串的代码)
图片6.png
6.下面是我帮大家整理出来的代码,把我们刚刚复制的图片代码替换到下面蓝色的代码,数字是我们的QQ,img那个是我们的图片代码!(改好后记得复制)
图片7.png
7.复制好之后,我们回到富文本,按F12审查元素,然后按CTRL+F搜索,输入【contenteditable】,展开代码段,右键点击代码段,选择【Edit as HTML】把刚刚的图片代码删去打开代码段,然后粘贴我们的刚刚复制好的代码.
图片8.png
8.这时候我们就会看到图片悬浮在窗那了
图片9.png



9.如果你不想做客服的悬浮窗,想做一个超链接悬浮窗,也可以的,给大家整理出来了,和刚刚一样,只需要替换蓝色字体的代码进就完成了。
图片1.png
游客,如果您要查看本帖隐藏内容请回复



你好我好大家好
    米小淘   游客   2015-07-28 显示全部楼层
    好牛逼。为技术控鼓掌助威。


        按步骤操作的 可是预览一直显示 error   

          藻钙宝宝 发表于 2015-7-29 10:16
          按步骤操作的 可是预览一直显示 error


          你可以加我微信
          你好我好大家好


              @小董哥   黄金   2015-07-30 显示全部楼层


                  商品市场,搜“吧哈美”,免费分销高品质,低价格,高利润,一手品牌货源!

                    小智云   青铜   2015-08-03 显示全部楼层
                    不错噢!可以侧边栏排满

                      马哥总结的相当完善呀!能关闭的浮窗代码还是没找到?

                        您需要登录后才可以回帖 登录 | 立即注册

                        本版积分规则

                        复制链接
                        新浪微博
                        QQ空间
                        微信扫码
                        • 回复

                        • 评分

                        客服工作时间是9:00-18:00,客服妹子当前不在线,若不能及时回复请谅解。试试右上角的搜索吧,论坛有丰富的经验贴、公告贴,相信一定能够帮到您~

                        复制成功