在博客或网站添加一个固定在左下角的百度分享按钮

2013-10-21

最终效果如下图：

baidufx

将下面的html和css代码添加至需要的页面，如果是所有页面都要添加，可以放到footer里。

html代码如下：

<div class=“grid-690 left” id=“main-block”>
<div id=“bdshare” class=“bdshare_t bds_tools get-codes-bdshare float-share” style=“position: fixed; bottom: 38px; left: 0px; display: block;”>
<span class=“share-top”></span>
<span class=“bds-tsina”><a class=“bds_tsina” log=“type:3002,menu:1” href=“#”></a></span>
<span class=“bds-qzone”><a class=“bds_qzone” log=“type:3002,menu:2” href=“#”></a></span>
<span class=“bds-tqq”><a class=“bds_tqq” log=“type:3002,menu:3” href=“#”></a></span>
<span class=“bds-renren”><a class=“bds_renren” log=“type:3002,menu:4” href=“#”></a></span>
<span class=“bds-mshare”><a class=“bds_mshare” log=“type:3002,menu:5” href=“#”></a></span>
<span class=“share-bottom”></span> </div>
</div>
<script type=“text/javascript” id=“bdshare_js” data=“type=tools&mini=1&uid=6535084” src=“http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=383965“></script>

css 代码如下：

<style type=“text/css”>
#bdshare a:hover, #bdshare_s a:hover, #bdshare_pop a:hover {
color: #333;
opacity: .8;
filter: alpha(opacity=80);
}
#bdshare a, #bdshare_s a, #bdshare_pop a {
text-decoration: none;
cursor: pointer;
}
.bds_tools a {
background: url(http://bdimg.share.baidu.com/static/images/is.png?cdnversion=20130712) no-repeat;
}
span.bds_more, .bds_tools a {
display: block;
font-family: ’宋体’,Arial;
height: 16px;
float: left;
cursor: pointer;
padding-top: 6px;
padding-bottom: 3px;
padding-left: 22px;
}
.clearfix {
zoom: 1;
}
#main-block .float-share {
width: 50px;
height: 188px;
position: absolute;
display: none;
}
#main-block .float-share span a {
display: block;
width: 100px;
height: 230px;
background: url(http://img.baidu.com/img/iknow/exp/new-share.png);  
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src=“http://img.baidu.com/img/iknow/exp/new-share.png?v=130916“);
_background: transparent;
position: relative;
cursor: pointer;
background-position: 0 0!important;
}
#main-block .float-share span a:hover {
left: -50px;
opacity: 1;
filter: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src=“http://img.baidu.com/img/iknow/exp/new-share.png?v=130916“);
}
#bdshare {
_overflow-x: hidden;
z-index: 999999;
padding-bottom: 2px;
padding-left: 2px;
font-size: 12px;
float: left;
text-align: left!important;
zoom: 1;
}
#main-block .float-share span {
display: block;
overflow: hidden;
width: 50px;
height: 42px;
background: 0;
padding: 0;
}
#main-block .float-share .share-top {
display: block;
height: 10px;
overflow: hidden;
background: url(http://img.baidu.com/img/iknow/exp/new-share.png) no-repeat;
}
#main-block .float-share .bds_tsina {
top: -10px;
}
#main-block .float-share .bds_qzone {
top: -52px;
}
#main-block .float-share .bds_tqq {
top: -94px;
}
#main-block .float-share .bds_renren {
top: -136px;
}
#main-block .float-share .bds_mshare {
top: -178px;
}
#main-block .float-share .share-bottombottom {
display: block;
height: 10px;
overflow: hidden;
background: url(http://img.baidu.com/img/iknow/exp/new-share.png) no-repeat 0 -178px;;
}
.grid-690 {
background-repeat: no-repeat;
margin: 0 auto;
padding: 0;
}
.left {
float: left;
}
</style>

或者在你所用主题目录新建一个名称为：share.php的文件，将以上的代码复制到进去并保存传至服务器,
然后再将调用代码：

1. <?php wp_footer(); ?>

添加到主题页脚模板footer.php下面这句

<?php include(‘share.php’); ?>

的上面。