如何自定义分享按钮的样式

2018-02-26 18:33 更新

自定义分享按钮样式

您可以通过在我们的分享按钮html标签外设置div或其他容器来套用您的样式,也可以直接加入class名称到我们的html标签里

设置分享按钮的居中对齐:

<style>
.alignCenter{
	width:270px; //这里的数值,您可以根据您按钮的实际宽度进行设置
	margin:0 auto;
}
</style>
<div class="alignCenter">
<!-- Baidu Button BEGIN -->
	<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
	    <a class="bds_qzone"></a>
	    <a class="bds_kaixin001"></a>
	    <a class="bds_tsina"></a>
	    <a class="bds_tqq"></a>
	    <a class="bds_renren"></a>
	    <span class="bds_more">更多</span>
	</div>
    <script type="text/javascript" id="bdshare_js" data="type=tools" ></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>
<!-- Baidu Button END -->
</div>

设置分享按钮的居右对齐:

<style>
.alignRight{
	float:right;
}
</style>
<!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare alignRight">
    <a class="bds_qzone"></a>
    <a class="bds_kaixin001"></a>
    <a class="bds_tsina"></a>
    <a class="bds_tqq"></a>
    <a class="bds_renren"></a>
    <span class="bds_more">更多</span>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools" ></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=" + new Date().getHours();
    </script>
<!-- Baidu Button END -->

当然,如果您有更好或更为简单的解决方案也欢迎您能够告知我们,分享您的方案,让更多使用者享受您的便捷

 

如何让百度分享按钮更加符合我的页面要求?

百度分享按钮按照它本身设计设定了简单的默认样式,但可能并不能完全满足您的页面呈现,为此我们推荐您可以将百度分享按钮写入您的自定义样式区域里,比如:

<style>
.userStyle{  //您可以按照您的页面需要,自主定义外套样式,给您更大的灵活性
	width:100%;
	height:30px;
	background:#ccc;
	display:block;
}
</style>
<div class="userStyle">
<!-- Baidu Button BEGIN -->
    <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
        <a class="bds_qzone"></a>
        <a class="bds_kaixin001"></a>
        <a class="bds_tsina"></a>
        <a class="bds_tqq"></a>
        <a class="bds_renren"></a>
        <span class="bds_more">更多</span>
    </div>
    <script type="text/javascript" id="bdshare_js" data="type=tools" ></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>
<!-- Baidu Button END -->
</div>

当然,如果您有更好或更为简单的解决方案也欢迎您能够告知我们,分享您的方案,让更多使用者享受您的便捷

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号