【教程】百度分享(赞)按钮如何居中显示

正在很努力的加载中...

最近很多基友问我文章页面底部的“文章很赞”按钮怎么弄得,其实这按钮有很多种,比如无觅呀,还有一些wordpress赞插件或者相关的代码,我自己用的是百度分享按钮。

百度分享里面有一个喜欢按钮,可以单独设置成喜欢,也可以设置成喜欢后分享按钮。点击后就会出现各种分享按钮。

很多基友们将百度按钮放到页面中发现不是居中的,其实百度分享按钮是js形式的,用css居中代码“text-align: center”等等的都不可以使之居中。

这里可以再加一层自定义的DIV,把百度分享的div方块放在里面,然后使用padding-left或者padding-right来调整其位置使之居中。详细举个例子吧。

百度喜欢后分享代码是:
<!-- 将此标记放在您希望显示like按钮的位置 -->
<div class="bdlikebutton"></div>

<!-- 将此代码放在适当的位置,建议在body结束前 -->
<script id="bdlike_shell"></script>
<script>
var bdShare_config = {
"type":"small",
"color":"blue",
"uid":"2279494",
"share":"yes"
};
document.getElementById("bdlike_shell").src="http://bdimg.share.baidu.com/static/js/like_shell.js?t=" + Math.ceil(new Date()/3600000);
</script>

那么自定义一个DIV层仅仅将<div class="bdlikebutton"></div>   这段代码放在里面就行了。例如新建一个id=1234的div。

居中后的代码为:(其中红色的为添加的DIV层,大家可以任意调整padding-left:262px;中的262使其居中,本主题使用262px可以居中。
<!-- 将此标记放在您希望显示like按钮的位置 -->
<div id=1234 style=" padding-left:262px;text-indent: 0;">
<div class="bdlikebutton"></div>
</div>
<!-- 将此代码放在适当的位置,建议在body结束前 -->
<script id="bdlike_shell"></script>
<script>
var bdShare_config = {
"type":"small",
"color":"blue",
"uid":"2279494",
"share":"yes"
};
document.getElementById("bdlike_shell").src="http://bdimg.share.baidu.com/static/js/like_shell.js?t=" + Math.ceil(new Date()/3600000);
</script>

大家可能发现了,百度喜欢按钮或者喜欢后分享按钮才有类似于<div class=”bdlikebutton”></div>的代码,但是百度分享按钮并没有,别急,百度分享按钮应该有类似与如下代码:
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
<span class="bds_more">分享到:</span>
<a class="bds_qzone" title="分享到QQ空间" href="#"></a>
<a class="bds_tsina" title="分享到新浪微博" href="#"></a>
<a class="bds_tqq" title="分享到腾讯微博" href="#"></a>
<a class="bds_renren" title="分享到人人网" href="#"></a>
<a class="bds_t163" title="分享到网易微博" href="#"></a>
<a class="shareCount" href="#" title="累计分享32257次">3.2万</a>
</div>

那么将以上代码用新的DIV框起来就行了。

不过其实不用新DIV层的,直接在它的DIV中添加CSS样式就行了。

比如上面的分享代码,直接把<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">

改为<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare" style=" padding-left:262px;text-indent: 0;">

感谢大家对本站的持续关注。洃少在这里祝大家万事顺利了。清明节要到了,放假该回家了。

域名在备案,我没有关站,不知道能不能通过,总是不想关站啊。过不了的话就关了。

还有最近忙,没空写文章,没空去回访,大家莫怪,等过些日子,我会一个个去回访的。谢谢大家了。

文章出自:http://www.zuifengyun.com/baidu-share-centered.html 版权所有,除注明外皆为原创。文章仅为作者个人观点,不代表醉风云立场。

正在很努力的加载中...

关于本文作者:HuiSir

建站爱好者,互联网评论家,网页视觉设计师

  1. 能不能做成一个插件 你这样说 我不知道怎么做 :mrgreen: :mrgreen: :mrgreen:

    • 貌似center不行,之前我多次弄不行。但是现在也许行了?百度分享代码变了

  2. 👿 博主不觉得很麻烦吗?我直接在百度分享的JavaScript代码中加了Center标签就搞定了! 如一下网址所示:http://www.jiugewz.com/?p=296

      • 话说博主的主题风格还是挺不错的,要是导航是这种【http://yrwr.net/】的就好看的,纯属个人品味~~。博主要是能把【读者墙】或者【美女推荐】功能代码分享一下就很感谢了! 😛