网站添加浮动分享按钮(简洁好用的百度分享浮动代码添加方式)

阿里云代金券 腾讯云代金券 VULTR优惠码 Ucloud云主机

在试验了数个分享代码之后,最后选择使用下面这个,因为这个方法很简洁,不占页面位置,也容易点到,用起来非常方便。感谢知更鸟提供这样的代码。

第一步,在你所用主题目录新建一个名称为:share.php的模板文件,将下面的代码复制到进去并保存:

<div id="share">

<div class="share">

        <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">   
            <a class="bds_tsina"></a>   
            <a class="bds_tqq"></a>   
            <a class="bds_qzone"></a>   
            <a class="bds_renren"></a>

            <span class="bds_more"></span>   
        </div>   
        <div style="clear:both;"></div>   
    </div>   
</div>   
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=0" ></script>   
<script type="text/javascript" id="bdshell_js"></script>   
<script type="text/javascript">   
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)   
</script>   
<style type="text/css">   
#share {   
    display:block;   
    width:35px;   
    margin-left:-506px;/* 修改左右位置 */   
    position:fixed;   
    left:50%;   
    top:420px;/* 修改上下位置 */   
    _margin-left:-506px;/* IE6修改左右位置 */   
    _position:absolute;   
    _margin-top:420px;/* IE6修改上下位置 */   
    _top:expression(eval(document.documentElement.scrollTop));   
    }   
.share {   
    background:#fff;   
    width:24px;   
    border: 1px solid #ccc;   
    border-radius:5px 0 0 5px;   
    }   
#bdshare_l {   
    border-radius: 5px;   
    }   
div #bdshare_l_c {   
    border: 1px solid #ccc;   
    border-radius: 5px;   
    }   
#bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p {   
    display:none;   
    }   
</style>

第二步,将调用代码:

<?php include('share.php'); ?>

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

<?php wp_footer(); ?>

具体使用可针对不同主题的页面宽度,适当调整固定按钮的位置,代码中有注释。

赞(1) 领红包
转载注明:楚狂人 » 网站添加浮动分享按钮(简洁好用的百度分享浮动代码添加方式)

云计算我们是认真的

阿里云服务器腾讯云服务器

扫码领红包 或者 支付宝搜索:5981405

支付宝扫一扫打赏