百度分享如何自定义分享按钮样式

王朝学院·作者佚名  2016-08-22
窄屏简体版  字體: 小  |  中  |  大  |  超大  

您可以通过在我们的分享按钮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>

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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航