自定义网站上Qzone分享组件按钮的图片和样式

创络讲堂 2014-11-28 08:00:00 5227次 https://www.chuangluo.com/news_412.html 作者:创络科技

目前比较知名的网站分享代码供应商已经有很多家了,大家可以根据自己的实际需求去选择。例如:百度分享、Qzone分享、Jiathis分享等等,比如,我们自己的官网只需要分享到空间而已,所以我们选择了Qzone分享组件,其他分享按钮样式暂未研究,以后有可能会写相关资料,敬请留意。

而每一个分享的功能都非常的完善,界面也十分的丰富。于是可能就会有人问,为什么不用分享代码自带的分享组件按钮的图片和样式呢?这是因为我们想要自己的和别人的不一样,而且当网站风格和这些分享组件的风格无法一致的时候,就需要自定义网站上Qzone分享组件按钮的图片和样式了。

我们新版的官方网站由HTML5开发,风格也完全和过去的网站不一样,同时基本上都是采用全屏模式设计的,根本没有地方来放置分享按钮,只能集成在在线客服栏目这里。现在进入正题,我们要如何自定义网站上Qzone分享组件按钮的图片和样式呢?我们这里以图片为例向大家讲解一下我们是如何操作的!

第一步:准备好按钮图片,请大家根据自己的网站风格设计好按钮图片样式;

第二步:到Qzone分享组件官网去复制分享代码;

第三步:在自己的网站CSS文件中引用图片并定义新的按钮样式,以cl_share为例;

第四步:根据自己的实际需要,删除多余的代码!

showcount:?1?,/*是否显示分享总数,显示:?1?,不显示:?0? */

desc:??,/*默认分享理由(可选)*/

summary:??,/*分享摘要(可选)*/

title:??,/*分享标题(可选)*/

site:??,/*分享来源 如:腾讯网(可选)*/

pics:??, /*分享图片的路径(可选)*/

style:?203?,

width:98,

height:22

这些都是可要可不要的,我们只保留了第一个,具体大家参考下图片中的处理方法。最后一个获取图片的JS也可以不要了,因为我们已经有自己的图片了。

自定义网站上Qzone分享组件按钮的图片和样式

到这里,就已经实现了网站上Qzone分享组件按钮的图片和样式。但是有可能会存在位置不对,分享按钮没有出现在我们预期的位置,这就需要我们进一步调整。

最后的细节调整:在网页中找一个位置,新建一个位置正确的DIV并设置其CSS样式为position:relative。然后将分享代码粘贴在这个DIV里,然后在我们自己定义的按钮样式中(本例中为#cl_share),设置position:absolute绝对定位。实际效果请参考本站右侧分享按钮!

  • 怎样查看一个网站是不是用PHP开发的
    2019-12-24 10:27:32
    有的时候我们需要知道网站使用的是什么语言开发的,例如在客户验收网站的时候就有这个必要,本文将告诉大家怎样查看一个网站是不是用PHP开发的。
  • 怎样在网站后台修改二级栏目的顺序
    2013-05-17 08:00:00
    网站的二级栏目里,总会有一些栏目有优先级。一般网站设计的时候没有考虑到排序的问题,因此要修改栏目的排序就比较麻烦,必须得请数据库设计师帮忙调整。现在,创络新的网站后台管理系统将彻底解决这个问题。
  • 怎样通过后台修改网站的背景图片
    2013-05-16 08:00:00
    过去,如果您想要修改网站背景,是不是还得专门打电话到网络公司去,让那边的技术员代为操作?现在,再也不用这么麻烦了。只需要登陆后台,简单的设置一下,就可以达到您想要的效果了。
  • 老客户们是这样对待网站设计这件事情的
    2012-11-25 08:00:00
    我们在这个礼拜的工作中发现,老客户和新客户对待网站设计这件事情有很大的区别。下面创络就专门对此进行了一些总结分析,希望对从来没有做过网站的新客户有一些帮助。
  • 企业网站这样设计会赶走访问者
    2012-06-22 08:00:00
    之所以要专门针对企业网站来说这个问题,主要是因为企业网站的流量对企业来说弥足珍贵,稍有不慎放走一个有成交意向的IP都是损失。有鉴于此,深圳网站建设公司【创络】总结了一些有关企业网站设计时的用户体验细节。
  • 怎样将我的网站托管给创络
    2010-10-27 08:00:00
    有极个别的客户对原来的为其服务的深圳网络公司或者其他网络公司产生不满,而产生需要将网站转移寄存在创络科技服务器上,由此便有了怎样将我的网站转移给创络的疑问?
标准建站流程
客服电话
  • 132-6576-8769
  • 0755-23698839