加入国际站
返回旧版 新版反馈
关闭 评分
铜币:
剩余
* 评分才能提交噢
理由:

 | 
只看楼主


  • 0 楼#
    G

    greensport

    • 粉丝
      6
    • 人气
      84
    • 积分
      215
    • 铜币
      13


    由于买家反馈,悬浮旺旺影响使用的感受和整体满意度,目前代码已经下线,所以国际站不能设置悬浮旺旺,
    多语言网址的链接域名逻辑进行了修改,http://russian.alibaba.com/gs-suppliers_XXX的展示逻辑已经错误,请大家了解!
    我想很多人可能和我一样,想知道如何设置多旺旺浮动在线。我求助阿里,他们给了我下面这篇贴子,但无奈我看不懂代码啊,始终做不出想要的效果来。由于没人可问,没办法只好自己摸索,经过我二天的研究与多次尝试,终于初步读懂了代码,现分享如下。

    先看最终的效果图,动态效果可以去本人旺铺地址http://greensport.en.alibaba.com/ 看,我的旺铺做的不是很好:
    undefined

    完整的代码如下,把这些代码复制到自定义内容==》html编辑当中,就可以得到和我一样的效果。
    <div style="position: fixed; left: 10.0px; top: 245.0px; width: 100.0px; padding: 2.0px 5.0px; -webkit-box-shadow: 2.0px 2.0px 2.0px; -moz-box-shadow: 2.0px 2.0px 2.0px; box-shadow: 2.0px 2.0px 2.0px; background-color: #ffffff; border: 1.0px solid #f1f1f1;">
    <p><strong>Service Online</strong></p>
    <p><img src="http://i00.i.aliimg.com/img/esite/member/200308079/13a8a6093db64863899acfd3b6b9b66a.jpg" alt="" width="100px" height="66px" /></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Forrest</span></a></p>
    <a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Amy</span></a>
    <p> </p>
    <a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Fayer</span></a>
    <p> </p>
    <a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Rita</span></a>
    <p> </p>
    <a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Cathy</span></a></div>

    在我上面的代码中,有几个不同的旺旺,实际上链接地址就我一个,就是我一个人的旺旺,我只是复制了相同的代码,然后把我的名字修改为不同人的名字而已。如果你想设置不同的旺旺,指向不同的ID,只须在官方的旺旺代码生成器中得到代码即可:http://www.alibaba.com/help/atm-url-generator.html

    用官方的旺旺代码生成器,生成不同的旺旺代码,后把生成的代码复制到这几段代码的下面,然后提交发布就OK。注意记得在代码前加上换行符</p>
    <div style="position: fixed; left: 10.0px; top: 245.0px; width:
    100.0px; padding: 2.0px 5.0px; -webkit-box-shadow: 2.0px 2.0px 2.0px;
    -moz-box-shadow: 2.0px 2.0px 2.0px; box-shadow: 2.0px 2.0px 2.0px;
    background-color: #ffffff; border: 1.0px solid #f1f1f1;">
    <p><strong>Service Online</strong></p>
    <p><img
     
    src="http://i00.i.aliimg.com/img/esite/member/200308079/13a8a6093db64863899acfd3b6b9b66a.jpg"
     alt="" width="100px" height="66px" /></p>

    现在我来详细介绍如何看懂代码,如何修改代码。首先,经过我的研究发现,这些代码表示如下意思:
    <p> 表示换行
    <a..........................................</span></a> 表示一段完整的代码
    <div.....</div> 表示自定义
    px 表示像素或者大小
    font 表示前端
    像其它color, float, left, right等等就是英语所示的意思


    <div style="position: fixed; left: 10.0px; top: 245.0px; width:
    100.0px; padding: 2.0px 5.0px; -webkit-box-shadow: 2.0px 2.0px 2.0px;
    -moz-box-shadow: 2.0px 2.0px 2.0px; box-shadow: 2.0px 2.0px 2.0px;
    background-color: #ffffff; border: 1.0px solid #f1f1f1;">
    表示是面板固定(fixed)在左侧区域, 如果你想在右边空白区域显示,就把left改成right
    left:10.0px :px是像素,因为我不想这个模块太靠电脑屏幕边缘,所以我改成了10.0px,你们可以自己把10换成其它数字,比如0,1,2等,可以发现有不同的效果。
    top: 245.0px表示这个模块距离电脑屏幕最顶端边缘的距离,你可以修改数字245,比如230等任意数字,显示效果会不同。
    width:
    100.0px
    表示这个模块的宽度,数字一样可以修改。
    其它的内容我们就不去研究。
    如果你不喜欢我的“Service Online"和那张美女图片,你可以把这二段进行删掉。
    <p><strong>Service Online</strong></p>
    <p><img
     
    src="http://i00.i.aliimg.com/img/esite/member/200308079/13a8a6093db64863899acfd3b6b9b66a.jpg"
     alt="" width="100px" height="66px" /></p>
    对于这二段的代码如何修改,我发现用文字不太好解释,用图片解释又太麻烦。这二段代码都是电脑自动生成的。其中第一段是Service Online的代码,第二段是图片的代码。如果你想修改这张图片为其它任意图片,先把这段代码删掉,先提交一次。然后再点编辑,此时不要在html里面编辑,就在常规编辑里面直接上传图片,提交后再打开html编辑器即可得到这段代码。然后把关于图片的这段代码放到阿里旺旺代码的段落的上面,在代码的前加上换行符<p>即可。注意一定要先把旺旺在线提交了,再来编辑这张图片和图片上的文字。

    图片上面的文字,是我直接在常规编辑里面打上去的,设置字体颜色即可。

    对于官方生成的阿里旺旺在线,有二种风格,说实话,这二种风格我都不喜欢,于是我对比了二种风格的代码,发现二种风格的代码如下地方不同:
    风格一生成的代码如下:
    <a class="alitalk-link" data-uid="cn1500384227" target="_blank" href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1500384227&site=enaliint&s=22&charset=UTF-8" style="text-decoration:none" ><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=cn1500384227&site=enaliint&s=22&charset=UTF-8" alt="send message to me" style="border:none; vertical-align:middle;" /> <span style="font:700 11px/12px tahoma; color:#0066cc;">Forrest</span></a>
    风格二生成的代码如下:
    <a class="alitalk-link" data-uid="cn1500384227" target="_blank" href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1500384227&site=enaliint&s=24&charset=UTF-8" style="display:inline-block; width:80px; text-align:center; text-decoration:none;" ><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=cn1500384227&site=enaliint&s=24&charset=UTF-8" alt="send message to me" style="border:none; margin-bottom:5px;" /><span style="display:block; font:700 14px/16px tahoma; color:#0066cc; word-wrap:break-word;">Forrest</span></a>

    只要把风格一中的二处 22&charset改成风格二中的24&charset,和风格一中的font:700 11px/12px 改成风格二中的font:700 14px/16px,就可得到既是大的闪动旺旺图像,又能名字和图像并排显示。修改后的代码如下:
    <a class="alitalk-link" data-uid="cn1500384227" target="_blank"
    href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1500384227&site=enaliint&s=24&charset=UTF-8"
     style="text-decoration:none" ><img border="0"
    src="http://amos.alicdn.com/online.aw?v=2&uid=cn1500384227&site=enaliint&s=24&charset=UTF-8"
     alt="send message to me" style="border:none; vertical-align:middle;"
    /> <span style="font:700 14px/16px tahoma;
    color:#0066cc;">Forrest</span></a>

    如果你想设置几个不同人的名字,只需要复制上述代码,然后把每段代码中的名字Forrest换成不同人的姓名即可,最终的链接都是指向你一个人。记住,在每段代码前面一定要加上换行符<p>,要不你的几个旺旺会连在一起,不好看。

    对于自定义版块,我建议在阿里页面左侧的最下角这个地方添加自定义模块,如果在其它地方添加模块,会留有很难看的空白区域,添加版块的区域如下图:
    undefined

    经过我这样的解释,再去看看这些代码,是不是觉得简单多了?那就自已动手DIY吧!

  • 1 楼#
    G

    greensport

    • 粉丝
      6
    • 人气
      84
    • 积分
      215
    • 铜币
      13

    我发现我的这几段代码当中,有几段不同的阿里旺旺代码之间多了<p>&nbsp,大家复制的时候记得把这删掉,是多余的,会造成二个不同的旺旺空间多了一行空行,不好看

  • 2 楼#

    cnzhongdi

    • 粉丝
      21
    • 人气
      952
    • 积分
      25
    • 铜币
      682

    很用心 支持你下

  • 3 楼#
    G

    greensport

    • 粉丝
      6
    • 人气
      84
    • 积分
      215
    • 铜币
      13

    cnzhongdi:很用心 支持你下回到原帖
    哈,谢谢

  • 4 楼#
    G

    greensport

    • 粉丝
      6
    • 人气
      84
    • 积分
      215
    • 铜币
      13

    我们领导说我的那个旺旺大图标不好看,要我改成小的闪动的图标,没办法,只好改了。也就是直接用风格一的代码。

    另外,我把这个模块的位置向右调了一下,放到了空白区域的中间,也就是改为left: 18px。另外,我们领导让我把这个显示面板调宽一点,我把width改为了125px。

    同时,我修改了英文名字的字体和格式。用代码去调整格式会比较复杂,我也不太会,我就在普通编辑里面先调好一个名字的字体,然后复制粘贴,修改显示名字即可。

    最后,我就直接在普通编辑里面把Service Online修改为Sales。

    最终的代码如下:
    <div style="position: fixed; left: 18.0px; top: 100.0px; width: 125.0px; padding: 2.0px 5.0px; -webkit-box-shadow: 2.0px 2.0px 2.0px; -moz-box-shadow: 2.0px 2.0px 2.0px; box-shadow: 2.0px 2.0px 2.0px; background-color: #ffffff; border: 1.0px solid #f1f1f1;">
    <p style="text-align: center;"><span style="font-size: 18.0px; color: #3366ff;"><strong>Sales</strong></span></p>
    <p><img src="http://i00.i.aliimg.com/img/esite/member/200308079/13a8a6093db64863899acfd3b6b9b66a.jpg" alt="" width="127" height="83" /></p>

    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Forrest</span></a></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Amy</span></a></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Fayer</span></a></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Rita</span></a></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Cathy</span></a></p>
    </div>

  • 5 楼#

    jackie.

    • 粉丝
      1
    • 人气
      398
    • 积分
      205
    • 铜币
      151

    不错,我用上了,好评~

  • 6 楼#

    ellen0618

    • 粉丝
      3
    • 人气
      297
    • 积分
      166
    • 铜币
      12

    我用你的方式试了一下,想你那样,但是我点击那个旺旺没有弹出一个窗口!我点击你的,也是一样的,如果这样的话就没用实际性了!

  • 7 楼#

    cn117472211

    • 粉丝
      0
    • 人气
      80
    • 积分
      0
    • 铜币
      5

    ellen0618:我用你的方式试了一下,想你那样,但是我点击那个旺旺没有弹出一个窗口!我点击你的,也是一样的,如果这样的话就没用实际性了!回到原帖
    应该是网速问题吧,我这边没有任何的问题哦

  • 8 楼#

    cn1501673142

    • 粉丝
      2
    • 人气
      257
    • 积分
      0
    • 铜币
      238

    我也已经做了,虽不是用的你这个代码,但还是支持一下

  • 9 楼#

    cn1501673142

    • 粉丝
      2
    • 人气
      257
    • 积分
      0
    • 铜币
      238

    cnzhongdi:很用心 支持你下回到原帖
    亲  你这个是做什么滴?看你网站不像是英文

  • 10 楼#

    zhagigift

    • 粉丝
      0
    • 人气
      258
    • 积分
      395
    • 铜币
      35

    上面的Service Online可以改颜色吗?

  • 11 楼#

    WuWan

    • 粉丝
      108
    • 人气
      307
    • 积分
      10
    • 铜币
      51

    感谢分享!

  • 12 楼#

    cn1500219663

    • 粉丝
      6
    • 人气
      354
    • 积分
      0
    • 铜币
      351

    学习下啦,谢谢分享咯

  • 13 楼#

    cqscjd

    • 粉丝
      0
    • 人气
      99
    • 积分
      265
    • 铜币
      7

    很好很强大,谢谢分享,源代码很强大

  • 14 楼#
    G

    greensport

    • 粉丝
      6
    • 人气
      84
    • 积分
      215
    • 铜币
      13

    zhagigift:上面的Service Online可以改颜色吗?回到原帖
    可以的哦

  • 15 楼#

    sanpucn

    • 粉丝
      0
    • 人气
      67
    • 积分
      145
    • 铜币
      3

    需要铜币

  • 16 楼#

    cn1001532583

    • 粉丝
      1
    • 人气
      321
    • 积分
      0
    • 铜币
      71

    好用,多谢分享

  • 17 楼#

    epinchina

    • 粉丝
      4
    • 人气
      211
    • 积分
      0
    • 铜币
      32

    学习了,谢谢lz分享!

  • 18 楼#

    wantengtex

    • 粉丝
      32
    • 人气
      618
    • 积分
      30
    • 铜币
      1866

    好用的,我换上了新装,很不错呢

  • 19 楼#

    INEO

    • 粉丝
      1
    • 人气
      328
    • 积分
      1021
    • 铜币
      60

    网页的定位技术,只有你想不到,没有做不到




  • 由于买家反馈,悬浮旺旺影响使用的感受和整体满意度,目前代码已经下线,所以国际站不能设置悬浮旺旺,
    多语言网址的链接域名逻辑进行了修改,http://russian.alibaba.com/gs-suppliers_XXX的展示逻辑已经错误,请大家了解!
    我想很多人可能和我一样,想知道如何设置多旺旺浮动在线。我求助阿里,他们给了我下面这篇贴子,但无奈我看不懂代码啊,始终做不出想要的效果来。由于没人可问,没办法只好自己摸索,经过我二天的研究与多次尝试,终于初步读懂了代码,现分享如下。

    先看最终的效果图,动态效果可以去本人旺铺地址http://greensport.en.alibaba.com/ 看,我的旺铺做的不是很好:
    undefined

    完整的代码如下,把这些代码复制到自定义内容==》html编辑当中,就可以得到和我一样的效果。
    <div style="position: fixed; left: 10.0px; top: 245.0px; width: 100.0px; padding: 2.0px 5.0px; -webkit-box-shadow: 2.0px 2.0px 2.0px; -moz-box-shadow: 2.0px 2.0px 2.0px; box-shadow: 2.0px 2.0px 2.0px; background-color: #ffffff; border: 1.0px solid #f1f1f1;">
    <p><strong>Service Online</strong></p>
    <p><img src="http://i00.i.aliimg.com/img/esite/member/200308079/13a8a6093db64863899acfd3b6b9b66a.jpg" alt="" width="100px" height="66px" /></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Forrest</span></a></p>
    <a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Amy</span></a>
    <p> </p>
    <a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Fayer</span></a>
    <p> </p>
    <a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Rita</span></a>
    <p> </p>
    <a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=24&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font: 700 14.0px / 16.0px tahoma; color: #0066cc;">Cathy</span></a></div>

    在我上面的代码中,有几个不同的旺旺,实际上链接地址就我一个,就是我一个人的旺旺,我只是复制了相同的代码,然后把我的名字修改为不同人的名字而已。如果你想设置不同的旺旺,指向不同的ID,只须在官方的旺旺代码生成器中得到代码即可:http://www.alibaba.com/help/atm-url-generator.html

    用官方的旺旺代码生成器,生成不同的旺旺代码,后把生成的代码复制到这几段代码的下面,然后提交发布就OK。注意记得在代码前加上换行符</p>
    <div style="position: fixed; left: 10.0px; top: 245.0px; width:
    100.0px; padding: 2.0px 5.0px; -webkit-box-shadow: 2.0px 2.0px 2.0px;
    -moz-box-shadow: 2.0px 2.0px 2.0px; box-shadow: 2.0px 2.0px 2.0px;
    background-color: #ffffff; border: 1.0px solid #f1f1f1;">
    <p><strong>Service Online</strong></p>
    <p><img
     
    src="http://i00.i.aliimg.com/img/esite/member/200308079/13a8a6093db64863899acfd3b6b9b66a.jpg"
     alt="" width="100px" height="66px" /></p>

    现在我来详细介绍如何看懂代码,如何修改代码。首先,经过我的研究发现,这些代码表示如下意思:
    <p> 表示换行
    <a..........................................</span></a> 表示一段完整的代码
    <div.....</div> 表示自定义
    px 表示像素或者大小
    font 表示前端
    像其它color, float, left, right等等就是英语所示的意思


    <div style="position: fixed; left: 10.0px; top: 245.0px; width:
    100.0px; padding: 2.0px 5.0px; -webkit-box-shadow: 2.0px 2.0px 2.0px;
    -moz-box-shadow: 2.0px 2.0px 2.0px; box-shadow: 2.0px 2.0px 2.0px;
    background-color: #ffffff; border: 1.0px solid #f1f1f1;">
    表示是面板固定(fixed)在左侧区域, 如果你想在右边空白区域显示,就把left改成right
    left:10.0px :px是像素,因为我不想这个模块太靠电脑屏幕边缘,所以我改成了10.0px,你们可以自己把10换成其它数字,比如0,1,2等,可以发现有不同的效果。
    top: 245.0px表示这个模块距离电脑屏幕最顶端边缘的距离,你可以修改数字245,比如230等任意数字,显示效果会不同。
    width:
    100.0px
    表示这个模块的宽度,数字一样可以修改。
    其它的内容我们就不去研究。
    如果你不喜欢我的“Service Online"和那张美女图片,你可以把这二段进行删掉。
    <p><strong>Service Online</strong></p>
    <p><img
     
    src="http://i00.i.aliimg.com/img/esite/member/200308079/13a8a6093db64863899acfd3b6b9b66a.jpg"
     alt="" width="100px" height="66px" /></p>
    对于这二段的代码如何修改,我发现用文字不太好解释,用图片解释又太麻烦。这二段代码都是电脑自动生成的。其中第一段是Service Online的代码,第二段是图片的代码。如果你想修改这张图片为其它任意图片,先把这段代码删掉,先提交一次。然后再点编辑,此时不要在html里面编辑,就在常规编辑里面直接上传图片,提交后再打开html编辑器即可得到这段代码。然后把关于图片的这段代码放到阿里旺旺代码的段落的上面,在代码的前加上换行符<p>即可。注意一定要先把旺旺在线提交了,再来编辑这张图片和图片上的文字。

    图片上面的文字,是我直接在常规编辑里面打上去的,设置字体颜色即可。

    对于官方生成的阿里旺旺在线,有二种风格,说实话,这二种风格我都不喜欢,于是我对比了二种风格的代码,发现二种风格的代码如下地方不同:
    风格一生成的代码如下:
    <a class="alitalk-link" data-uid="cn1500384227" target="_blank" href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1500384227&site=enaliint&s=22&charset=UTF-8" style="text-decoration:none" ><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=cn1500384227&site=enaliint&s=22&charset=UTF-8" alt="send message to me" style="border:none; vertical-align:middle;" /> <span style="font:700 11px/12px tahoma; color:#0066cc;">Forrest</span></a>
    风格二生成的代码如下:
    <a class="alitalk-link" data-uid="cn1500384227" target="_blank" href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1500384227&site=enaliint&s=24&charset=UTF-8" style="display:inline-block; width:80px; text-align:center; text-decoration:none;" ><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=cn1500384227&site=enaliint&s=24&charset=UTF-8" alt="send message to me" style="border:none; margin-bottom:5px;" /><span style="display:block; font:700 14px/16px tahoma; color:#0066cc; word-wrap:break-word;">Forrest</span></a>

    只要把风格一中的二处 22&charset改成风格二中的24&charset,和风格一中的font:700 11px/12px 改成风格二中的font:700 14px/16px,就可得到既是大的闪动旺旺图像,又能名字和图像并排显示。修改后的代码如下:
    <a class="alitalk-link" data-uid="cn1500384227" target="_blank"
    href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1500384227&site=enaliint&s=24&charset=UTF-8"
     style="text-decoration:none" ><img border="0"
    src="http://amos.alicdn.com/online.aw?v=2&uid=cn1500384227&site=enaliint&s=24&charset=UTF-8"
     alt="send message to me" style="border:none; vertical-align:middle;"
    /> <span style="font:700 14px/16px tahoma;
    color:#0066cc;">Forrest</span></a>

    如果你想设置几个不同人的名字,只需要复制上述代码,然后把每段代码中的名字Forrest换成不同人的姓名即可,最终的链接都是指向你一个人。记住,在每段代码前面一定要加上换行符<p>,要不你的几个旺旺会连在一起,不好看。

    对于自定义版块,我建议在阿里页面左侧的最下角这个地方添加自定义模块,如果在其它地方添加模块,会留有很难看的空白区域,添加版块的区域如下图:
    undefined

    经过我这样的解释,再去看看这些代码,是不是觉得简单多了?那就自已动手DIY吧!



  • 我发现我的这几段代码当中,有几段不同的阿里旺旺代码之间多了<p>&nbsp,大家复制的时候记得把这删掉,是多余的,会造成二个不同的旺旺空间多了一行空行,不好看



  • 很用心 支持你下



  • cnzhongdi:很用心 支持你下回到原帖
    哈,谢谢



  • 我们领导说我的那个旺旺大图标不好看,要我改成小的闪动的图标,没办法,只好改了。也就是直接用风格一的代码。

    另外,我把这个模块的位置向右调了一下,放到了空白区域的中间,也就是改为left: 18px。另外,我们领导让我把这个显示面板调宽一点,我把width改为了125px。

    同时,我修改了英文名字的字体和格式。用代码去调整格式会比较复杂,我也不太会,我就在普通编辑里面先调好一个名字的字体,然后复制粘贴,修改显示名字即可。

    最后,我就直接在普通编辑里面把Service Online修改为Sales。

    最终的代码如下:
    <div style="position: fixed; left: 18.0px; top: 100.0px; width: 125.0px; padding: 2.0px 5.0px; -webkit-box-shadow: 2.0px 2.0px 2.0px; -moz-box-shadow: 2.0px 2.0px 2.0px; box-shadow: 2.0px 2.0px 2.0px; background-color: #ffffff; border: 1.0px solid #f1f1f1;">
    <p style="text-align: center;"><span style="font-size: 18.0px; color: #3366ff;"><strong>Sales</strong></span></p>
    <p><img src="http://i00.i.aliimg.com/img/esite/member/200308079/13a8a6093db64863899acfd3b6b9b66a.jpg" alt="" width="127" height="83" /></p>

    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Forrest</span></a></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Amy</span></a></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Fayer</span></a></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Rita</span></a></p>
    <p><a class="alitalk-link mc-click-target-with-quot" style="text-decoration: none;" href="http://amos.alicdn.com/msg.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" target="_blank" data-uid="cn1500384227"><img style="border: none; vertical-align: middle;" src="http://amos.alicdn.com/online.aw?v=2&amp;uid=cn1500384227&amp;site=enaliint&amp;s=22&amp;charset=UTF-8" alt="send message to me" border="0" /> <span style="font-family: arial , helvetica , sans-serif; font-style: normal; font-variant: normal; font-size: 11.0px; line-height: 12.0px; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; color: #0066cc;">Cathy</span></a></p>
    </div>



  • 不错,我用上了,好评~



  • 我用你的方式试了一下,想你那样,但是我点击那个旺旺没有弹出一个窗口!我点击你的,也是一样的,如果这样的话就没用实际性了!



  • ellen0618:我用你的方式试了一下,想你那样,但是我点击那个旺旺没有弹出一个窗口!我点击你的,也是一样的,如果这样的话就没用实际性了!回到原帖
    应该是网速问题吧,我这边没有任何的问题哦



  • 我也已经做了,虽不是用的你这个代码,但还是支持一下



  • cnzhongdi:很用心 支持你下回到原帖
    亲  你这个是做什么滴?看你网站不像是英文



  • 上面的Service Online可以改颜色吗?



  • 感谢分享!



  • 学习下啦,谢谢分享咯



  • 很好很强大,谢谢分享,源代码很强大



  • zhagigift:上面的Service Online可以改颜色吗?回到原帖
    可以的哦



  • 需要铜币



  • 好用,多谢分享



  • 学习了,谢谢lz分享!



  • 好用的,我换上了新装,很不错呢



  • 网页的定位技术,只有你想不到,没有做不到


23 回复

与 外贸社区|外贸圈 的连接断开,我们正在尝试重连,请耐心等待