有赞新零售社区

发帖
聊天专版»关于在微信商城插入悬浮窗和背景音乐详细教程

关于在微信商城插入悬浮窗和背景音乐详细教程

刘小炮 2015-05-21 10154 浏览 41 评论 | 只看楼主 [打印]  
第一步:必须下载谷歌浏览器,猎豹之类的根本就打不开..........
第二步:关于客服QQ之类的,我相信大家都通过激活了咯,所以不在赘述......嘎嘎【这里有链接哦】
QQ推广组件激活链接http://shang.qq.com/v3/index.html
第三步:新建自定义模块【最好是自定义模块,因为这样的话,商城首页才不会出现空白,研究了一下午才弄出来,只要最美】





第四步:自定义模块中添加【富文本】,然后在谷歌浏览器中,随便点击左边一块空白,【鼠标右键点击(审查元素)】然后鼠标移动到网页代码区域,按快捷键Ctrl+F,调出网页元素搜索框,在搜索框输入contenteditable;鼠标选中contenteditable这行元素,然后【右键】鼠标,在选项框中选择【Edit  as HTML】;代码编辑框中选中你在富文本编辑框中写的字符,例如“<p>浮窗</p>”注意:<p></p>字符也要全部选中,然后替换成下图后面的代码;
第五步:重点来啦 —优化版代码·解决了被产品图片遮挡状况选中<p>浮窗</p>,替换成如下代码:
<div style="z-index:999 !important;position:fixed;right:10px;bottom:160px;"><div id="to_user_list" style="color:#323232;outline-style:none;text-decoration:none;width:16px;display:block;height:78px;padding:7px 11px 7px 7px;border-top-left-radius:25px;border-top-right-radius:25px;border-bottom-right-radius:25px;border-bottom-left-radius:25px;box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 2px 0px;background-color:#00BC06;"><div id="to_user_list_icon_div" class="rel left" style="float:left;position:relative;width:20px;height:16px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;background-color:#FFFFFF;"><span class="to_user_list_icon_em_a abs" style="margin:0px;padding:0px;list-style:none;position:absolute;width:2px;height:2px;border-top-left-radius:1px;border-top-right-radius:1px;border-bottom-right-radius:1px;border-bottom-left-radius:1px;top:8px;left:4px;background-color:#00BA0A;"><a href="http://wpa.qq.com/msgrd?v=3&uin=84668080&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;"> </span></a></span><span class="to_user_list_icon_em_b abs" style="margin:0px;padding:0px;list-style:none;position:absolute;width:2px;height:2px;border-top-left-radius:1px;border-top-right-radius:1px;border-bottom-right-radius:1px;border-bottom-left-radius:1px;top:8px;left:9px;background-color:#00BA0A;"><a href="http://wpa.qq.com/msgrd?v=3&uin=84668080&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;"> </span></a></span><span class="to_user_list_icon_em_c abs" style="margin:0px;padding:0px;list-style:none;position:absolute;width:2px;height:2px;border-top-left-radius:1px;border-top-right-radius:1px;border-bottom-right-radius:1px;border-bottom-left-radius:1px;top:8px;right:4px;background-color:#00BA0A;"><a href="http://wpa.qq.com/msgrd?v=3&uin=84668080&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;"> </span></a></span><span class="to_user_list_icon_em_d abs" style="margin:0px;padding:0px;list-style:none;position:absolute;width:0px;height:0px;border-style:solid;border-width:4px;top:14px;left:6px;border-color:#FFFFFF transparent transparent;"><a href="http://wpa.qq.com/msgrd?v=3&uin=84668080&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;"> </span></a></span></div><p id="to_user_list_txt" class="left" style="margin-top:0px;margin-bottom:0px;padding:0px 3px 0px 4px;list-style:none;float:left;color:#FFFFFF;font-size:12px;line-height:16px;"><a href="http://wpa.qq.com/msgrd?v=3&uin=1502010852&site=qq&menu=yes" target="_blank"><span style="color:#FFFFFF;">联系我们</span></a></p></div></div>第六步:5.代码替换完成后,鼠标离开网页元素区域,在任意空白处,【一定要记住,多点几下,点到自定义菜单栏没有中文字体,才会保存成功的】点击鼠标,我们就发现网页出现了【联系我们】竖版右中的浮窗,鼠标【左键】单击富文本编辑框区域的【联系我们】,即可修改浮窗跳转的链接。默认链接是调动QQ对话窗口,你可以替换里面的QQ号1502010852为你的QQ号码,也可以把此链接改成,其它第三方平台的客服系统,你也可以替换其它链接,带用户去你设定的地址。
这是一个更有味的版本
(只需按上方步骤替换代码)

<div class="custom-richtext">
<p><a href="http://wpa.qq.com/msgrd?v=3&uin=84668080&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>


【赶紧给我32个赞吧,立马将背景音乐放出来啦,是更完善的哦!嘎嘎嘎】
大家有什么不懂的,可以直接加我微信【简爱工艺品】就行了,详细解答!
也可以直接楼下留言,晚上准时刷新!



用手机打开
收藏 23 ··· 回复
    刘小炮 青铜   2015-05-21 | 只看该作者
    自己抢沙发,嘎嘎!因为电脑问题,所以就没截图啦,大家可以去我店铺看看!

      刘小炮 青铜   2015-05-21 | 只看该作者
      刘小炮 发表于 2015-5-21 15:00
      自己抢沙发,嘎嘎!因为电脑问题,所以就没截图啦,大家可以去我店铺看看! ...


      http://kdt.im/M9Vrs5pG8:店铺链接

        刘小炮 青铜   2015-05-21 | 只看该作者

          创意狐   青铜   2015-05-21 | 只看该作者
          没看到音乐在哪。小骗子

            刘小炮 青铜   2015-05-24 | 只看该作者
            创意狐 发表于 2015-5-21 15:12
            没看到音乐在哪。小骗子


            音乐还没有上呀!都没人点赞,好吧  伤心 就这样沉了

              护法君   青铜   2015-05-25 | 只看该作者
              为什么我设置后,也出现联系我们了,但是点击进去后就是屏幕不停的闪动。也没有跳出QQ,怎么破?

                super小六   青铜   2015-05-26 | 只看该作者
                大赞楼主 非常感谢 很实用的方法

                  刘小炮 青铜   2015-05-26 | 只看该作者
                  护法君 发表于 2015-5-25 14:27
                  为什么我设置后,也出现联系我们了,但是点击进去后就是屏幕不停的闪动。也没有跳出QQ,怎么破? ...


                  呃呃呃什么机型,应该是链接代码那一段的问题,你再照着弄下!

                    lizong   青铜   2015-05-29 | 只看该作者
                    #在这里快速回复#http://wap.koudaitong.com/v2/feature/1gqz32kpo 原来有礼品店    前来顶贴{:6_150:}

                      淘哥   青铜   2015-06-04 | 只看该作者
                      求音乐,教程

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

                        本版积分规则

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

                        • 评分

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

                        复制成功