【高级设置】首页头部添加QQ咨询图标

　　如何在首页头部位置添加QQ咨询图标呢？

　　小编今天在这里经过实战，整理，总结出一个别样的利用首页头部管理功能的方法，仅供各位站长老师参考。

 

　　各位站长都知道，我们的创业网站首页头部图片有两种配置模式，一种是通栏配置模式，一种是分栏配置模式。前者不管是自己设计还是由圣才的美工人员设计，都是图片模式的，做出来的效果只能达到美观，但用户体验达不到我们预想的效果，比方说，我们想要在首页头部图片那里添加上QQ咨询图标，以便用户一点击就可以直接与我们对话，或添加上其他咨询方式等，一个非常简单的效果如下图：

　　如果要达到这种效果，怎么实现呢？

　　这里我们就要用到“分栏配置模式”了。

 

　　为了在实现这个效果的同时，保证我们网站首页头部图片的美观，我们需要先进行一个准备工作，将原有的首页头部图片进行裁剪，裁剪方法可以用专业的修图软件，如Photoshop，也可以用简单的截图软件，如QQ截图、浏览器截图工具等。将首页头部图片分割后是以下两个图片：

　　分割成logo部分（尺寸:250px * 100px）：

　　和首页头部右侧部分（尺寸:710px * 100px）： 

 

  然后，在管理员后台点击“首页头部管理”，选择：

　按照“网站首页头部图片设置方法”第三种配置方法，将LOGO上传上去，然后，将首页头部图片右侧部分按照如下方法上传到网站：

　　上传图片后，记下图片的网址，获取图片地址的方法是，在图片上点击鼠标右键，选择“图像属性”

 

　　在弹出的图象属性对话框中，选中图片地址，复制在记事本中，以备下一步使用。

 

　　

　　接下来的操作，就需要站长照葫芦画瓢，简单编辑网页代码，并上传在首页头部图片管理中，代码如下：

<span style="background-image:url(http://renren.100xuexi.com/ManagerUpPath/renren/Image/201112111514488909694.jpg); width:710px; height:100px; display:block;">
<p style=" padding-left:620px; padding-top:73px; padding-right:10px; padding-bottom:2px;" >
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=540421935&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:540421935:41" alt="点击这里给我发消息" title="点击这里给我发消息"></a></p></span>

 

 复制上面的这段代码，在管理员后台，首页头部管理栏目中，分栏配置模式：

 

 

　　1.粘贴后，将代码中的“http://renren.100xuexi.com/ManagerUpPath/renren/Image/201112111514488909694.jpg”（见红色部分）更换为之前复制的 首页头部右侧图片的地址。

　　2.将代码中的QQ号“540421935”（见红色部分）更换为自己要用的咨询QQ。

 

　　保存

 

　　设置完成，返回网站首页看一下效果吧！

　　小编技术有限，仅以此抛砖引玉，各位站长老师可充分发挥自己的技术水平，其他页面，或文章中也都允许源代码编辑，站长尽情自由发挥吧！

 

　　【补充说明】：  如果需要调整QQ咨询图标的位置，只需要调整代码中的这几个数字：

    padding-left:620px; padding-top:73px; padding-right:10px; padding-bottom:2px

 

　　padding-left 　是图标距离左边的像素数；

　　padding-top  　是图标距离上边的像素数；

　　padding-right　是图标距离右边的像素数；

　　padding-bottom 是图标距离下边的像素数。

 

　　对应的调整像素数字就可以调整图标的位置了。

 

圣才教育  倪彦辉

2011.11.13