|
有些基础的朋友都会自己建站，如果建站积累的经验还不是太多的话，可能只会被原有的网站模板限制。比如拿网站侧边栏的在线客服框来说，由于太多的新手朋友使用的是现成的模板或者是插件，导致侧边栏的客服框要么很丑，要么就是加了第三方的链接，这样，无论是对网站的用户体验还是网站的优化，都不是太好。 我给大家列出来几种常见常见的客服框，哪一种你更喜欢呢？
, R8 S$ h' T+ I$ z' ~
9 g. H/ L9 r' a' t这篇文章，我来教大家怎么给你的网站随心所欲的添加侧边栏在线客服框。为了方便教大家，我以我下载的源码为例来讲解，代码的下载我会放在网盘中提供给你们！ 一、先去网上找一些客服源码。比如你可以搜“网站客服源码”、“网站浮动客服源码”、“QQ在线客服代码”，“在线jQuery客服代码”等。因为大部分提供在线客服代码下载的站，都会有提供演示，所以大家先提前看好哪一种是你想要的，选择好以后下载下载。 二、下载后对文件进行分析，一般情况下，像这样的简单代码都会是一个index.html演示页，一个CSS文件夹，一个JS文件夹和一个Images文件夹。我下载了一个，如下图： . W3 r3 X( s) g: c- E
! S# p0 z) u7 Z' H
三、当我们下载好以后，可以先看一下在本地打开是否正常显示。 四、用网页编辑工具（dreamwave等）打开index.html，然后找到<body></body>中的客服代码，然后复制到你的网页底部或者是网站的底部模板文件中去。
+ `/ r" G7 \! |# P \; Z- C
( V; P. ` \" |. l) R五、在<head></head>中复制两段代码，然后粘贴到你的网站头部或者是网页头部模板文件中去，如图 六、修改调用的css文件和js文件的调用路径。 
七、查看images文件夹中有几张图片，如果你测试添加的客服框没有显示图片，你就在步骤四的<body></body>文件中和步骤六的css文件中找到图片所在链接，修改好即可！ % ~' q R: Y" p) w3 q6 u3 ~
+ ~; s u1 r% Z4 A8 j' H- q
6 @- d5 T' q" d$ j: S; W$ O4 |7 Y* H+ g* s
经过以上的几个步骤，属于你自己的在线悬浮客服框就已经调试好了，所有的代码都是在你的服务器中安装，并且也完全避免了调用第三方的JS文件的弊端，提高你的网站的加在速度。 建议： 因为网上很多的客服源码都带有第三方的广告信息，比如对方的网址，站名等，下载后请自行检查并去除，保持你的代码干净！ 本文演示代码下载：链接：http://pan.baidu.com/s/1dDlnbUh密码：0pwv $ ]9 v! B1 Q1 s8 l3 G$ k5 L$ ?
& T7 m5 `& N: d h
文/刘三土博客 一个半路出家转型的自媒体博客 原文出处链接：http://bbs.seowhy.com/thread-37839094-1-1.html
& t' M; l3 k) @, _$ m 搜外论坛原创作者：刘三土博客2 w: `9 ~) J" x3 a' J; d s
日期：2015-08-22
% K& z3 B' Z) j$ e | 
