制作zblog模板时，为了用户体验几乎都用到了各种浮动的返回顶部、在线QQ、旺旺、弹出二维码功能的小功能，如图：

给zblog php添加QQ、旺旺、二维码等在线客服功能的教程.png

这种小组件，电子商务、企业等类型网站几乎必备，今天要分享的就是如上图所示的功能代码：

1、先添加JS代码，可以封装到一个单独的JS文件内：

function setCookie(objName, objValue, objHours) {

    var str = objName + "=" + escape(objValue);

    if (objHours > 0) {

        var date = new Date();

        var ms = objHours * 3600 * 1000;

        date.setTime(date.getTime() + ms);

        str += "; expires=" + date.toGMTString();

    }

    document.cookie = str;}function getCookie(objName) {

    var arrStr = document.cookie.split("; ");

    for (var i = 0; i < arrStr.length; i++) {

        var temp = arrStr[i].split("=");

        if (temp[0] == objName) return unescape(temp[1]);

    }

    return "";}function reMoveCookie(name){

 setCookie(name,1,-1);}$(function(){ 

 if(getCookie('openState') == 'false'){   

  $('#widgets_wrap').addClass('widgets_small');

  $('.widgets_top span').addClass('widgets_hide');

  $('.widgets_top i').text('展开');

 }else if(getCookie('openState') == 'true'){   

  $('#widgets_wrap').removeClass('widgets_small');

  $('.widgets_top span').removeClass('widgets_hide');

  $('.widgets_top i').text('收起');   

 }

 $('.widgets_top').click(function(){ 

  if(getCookie('openState') == 'false'){

   setCookie("openState","true",7);

  }else if(getCookie('openState') == 'true'){

   setCookie("openState","false",7);

  }else{

   setCookie("openState","true",7);

  }

  var $_text = $(this).children('i').text();

  $('#widgets_wrap').toggleClass('widgets_small');

  $(this).children('span').toggleClass('widgets_hide');

  if($_text == '收起'){

   $(this).children('i').text('展开');

  }else{

   $(this).children('i').text('收起');

  }

 });

 $('#widgets_backtop').click(function(){

  $('html,body').animate({scrollTop:0},500);

 });

 $('#weixin').hover(function(){

  $(this).children('span').show();

 },function(){

  $(this).children('span').hide();

 });

 $('#weixin').click(function(){

  $(this).children('span').fadeToggle('fast');

 });});

2、在当前主题模板的</body之前加入以下代码：

<div id="widgets_wrap" class="widgets_wrap widgets_small">

 <div class="widgets_top">

  <span class="widgets_hide"></span>

  <i>展开</i>

 </div>

 <div class="widgets_main">

  <ul><li>

    <a rel="external nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=10000&site=qq&menu=yes" target="_blank" title="QQ联系">

     <img src="{$host}zb_users/theme/{$theme}/style/images/qq.png" alt="QQ联系"/>

    </a>

  </li><li id="weixin">    

    <img src="{$host}zb_users/theme/{$theme}/style/images/weixin.png" alt="微信二维码"/>    

    <span>

     <img src="这里添加二维码图片地址" alt="微信二维码"/>

     手机扫描二维码    </span>

   </li><li>

    <a rel="external nofollow" href="http://www.taobao.com/webww/ww.php?ver=3&touid=旺旺会员名&siteid=cntaobao&status=2&charset=utf-8" target="_blank" title="淘宝旺旺">

     <img src="{$host}zb_users/theme/{$theme}/style/images/wangwang.png" alt="淘宝旺旺"/>

    </a>

   </li><li id="widgets_backtop">    

    <img src="{$host}zb_users/theme/{$theme}/style/images/backtop.png" alt="返回顶部"/>    

   </li>

  </ul>

 </div></div>

3、添加CSS：

.widgets_wrap,.widgets_small {

	padding: 0;

	margin: 0;

	width: 90px;

	height: auto;

	position: fixed;

	right: 10px;

	top: 40%;

	z-index: 99999;	}.widgets_small {

	width: 60px;

	top: auto;

	bottom: 0;}.widgets_wrap div,.widgets_small div {

	padding: 0;

	margin: 0;}.widgets_top {

	width: 100%;

	background-color: #E6E6E6;

	height: 30px;

	line-height: 30px;

	text-align: right;

	cursor: pointer;

	font-size:12px;

	font-family:'Microsoft Yahei';}.widgets_top i {

	font-style: normal;}.widgets_top span,.widgets_top .widgets_hide {

	background:url(../images/arrow.png) no-repeat 2px 4px;

    width: 10px;

    height: 30px;

    float: right;

    margin: 3px 10px 0 3px;}.widgets_top .widgets_hide {

	background-position: -28px 8px;}.widgets_main {

	border: 3px solid #E6E6E6;

	background-color: #fff;}.widgets_main ul {

	padding: 0;

	margin: 0;

	width: 100%;}.widgets_wrap .widgets_main ul li,.widgets_small ul li {

	padding: 0;

	margin: 0;

	list-style: none;

	padding: 20px 0;

	border-bottom: 2px solid #E6E6E6;

	cursor: pointer;

	position: relative;}.widgets_wrap.widgets_small ul li {

	padding: 5px 0;}.widgets_main ul li img {

	display: block;

	width: auto;

	max-width: 32px;

	_width: 32px;

	height: auto;

	margin:0 auto;}.widgets_small ul li img {

	max-width: 24px;

	_width: 24px;}#weixin span {

	position: absolute;

	right: 100%;

	bottom: 0;

	display: none;

	width: 100px;

	height: auto;

	font-size: 13px;

	text-align: center;

	background-color: #efefef;

	padding: 5px;

	border-radius: 4px;

	color: #333;

	border-right: 4px solid #e6e6e6;}#weixin span img {

	display: block;

	margin:0 auto 5px;

	width: 100%; 

	height: auto;

	max-width: 100%;}

注：在添加CSS的时候，一定要注意其中的图片路径，这个返回顶部联系方式小组件，需要用到几个图片，在下方会分享出来：