自定义百度分享图标的方法

以下图为例,介绍自定义百度分享图标的方法
自定义百度分享
1.在CSS样式文件中自定义百度分享图标的样式(下面代码为示意,不完整)

.bdsharebuttonbox{line-height: 24px;
        height: 24px;
        overflow: hidden;
        vertical-align: top;}
.bdsharebuttonbox a{
        width: 24px;
        height: 24px;
        display: inline-block;
        margin-right: 5px;
        background: url(image/share.png) no-repeat;//你的图标图片
        cursor: pointer;
        margin-bottom: 0;
        opacity: .8
        }
.bdsharebuttonbox a:hover{opacity: 1}
.bdsharebuttonbox a.bds_tsina{background-position     : 0 0;}
.bdsharebuttonbox a.bds_weixin{background-position    : 0 -33px;}
.bdsharebuttonbox a.bds_qzone{background-position     : 0 -65px;}
.bdsharebuttonbox a.bds_sqq{background-position       : 0 -98px;}
.bdsharebuttonbox a.bds_renren{background-position    : 0 -131px;}
.bdsharebuttonbox a.bds_tqq{background-position       : 0 -163px;}
.bdsharebuttonbox a.bds_diandian{background-position  : 0 -356px;}
.bdsharebuttonbox a.bds_youdao{background-position    : 0 -388px;}
.bdsharebuttonbox a.bds_ty{background-position        : 0 -420px;}
.bdsharebuttonbox a.bds_fbook{background-position     : 0 -452px;}
.bdsharebuttonbox a.bds_more, .bdsharebuttonbox a.bds_count{
           background: none;
           width: auto;
           height: auto;
           position: relative;
           top: -6px;}
.bdsharebuttonbox a.bds_count{margin: 0 2px;}

2.在页面上需要放置百度分享的位置插入html代码

<div class="bdsharebuttonbox">
<a class="bds_more" data-cmd="more">分享到:</a> 
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
<a href="#" class="bds_taobao" data-cmd="taobao" title="分享到我的淘宝"></a>
<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
</div>

3.在页面底部引入JavaScript统计代码

<script>
	window._bd_share_config = {
        common: {
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "0"
        },
        share: [{
            bdCustomStyle: 'share.css'//你的自定义CSS样式文件路径
        }]
    }
    with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>
0
本站文章如未注明(转载分享)则均为JumpIdea原创、编译  转载请注明出处

1条评论

发表评论