如何自定義分享按鈕的樣式

2018-02-26 18:33 更新

自定義分享按鈕樣式

您可以通過在我們的分享按鈕html標(biāo)簽外設(shè)置div或其他容器來套用您的樣式,也可以直接加入class名稱到我們的html標(biāo)簽里

設(shè)置分享按鈕的居中對齊:

<style>
.alignCenter{
	width:270px; //這里的數(shù)值,您可以根據(jù)您按鈕的實(shí)際寬度進(jìn)行設(shè)置
	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>

設(shè)置分享按鈕的居右對齊:

<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 -->

當(dāng)然,如果您有更好或更為簡單的解決方案也歡迎您能夠告知我們,分享您的方案,讓更多使用者享受您的便捷

 

如何讓百度分享按鈕更加符合我的頁面要求?

百度分享按鈕按照它本身設(shè)計(jì)設(shè)定了簡單的默認(rèn)樣式,但可能并不能完全滿足您的頁面呈現(xiàn),為此我們推薦您可以將百度分享按鈕寫入您的自定義樣式區(qū)域里,比如:

<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>

當(dāng)然,如果您有更好或更為簡單的解決方案也歡迎您能夠告知我們,分享您的方案,讓更多使用者享受您的便捷

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號