WordPress文章页底部添加居中的百度喜欢按钮

  • A+
所属分类:wordpress

在博客文章结尾加上了一个百度喜欢按钮是不是很酷呀?!其实此类型按钮有很多种,例如无觅、友荐等等,但是我更喜欢简洁的百度喜欢按钮。

WordPress文章页底部添加居中的百度喜欢按钮

单触角蚂蚁的百度喜欢按钮

初次将百度喜欢按钮添加到single.php内后发现,按钮总是居左显示的,这样看起来很不协调,而且添加div style属性align=center或者text-align=center都无法使它居中,因为代码是js的。解决这个问题的完整代码如下:

  1. <!-- 将此标记放在您希望显示like按钮的位置 -->
  2. <div style=" padding-left:236px;text-indent: 0;">
  3. <div class="bdlikebutton"></div>
  4. </div>
  5. <!-- 将此代码放在适当的位置,建议在body结束前 -->
  6. <script id="bdlike_shell"></script>
  7. <script>
  8. var bdShare_config = {
  9. "type":"large",
  10. "color":"blue",
  11. "uid":"82019"
  12. };
  13. document.getElementById("bdlike_shell").src="http://bdimg.share.baidu.com/static/js/like_shell.js?t=" + Math.ceil(new Date()/3600000);
  14. </script>

其中,padding-left的值需要根据你网页内容框架的宽度和百度喜欢按钮的宽度来设置,假设你的文章内容框宽度A px,百度喜欢按钮在选择的最大的那个145px,所以padding-left应当为(A-145)/2 px,这个加减乘除法就不多说了。


我是将百度喜欢按钮添加在wordpress文章页的底部,上一篇下一篇之前;所以我的步骤如下:

1.后台→外观→编辑,找到single.php,点击进行编辑。

2.找到你想要将百度喜欢放置的地方(我找到了上一篇),将上面的代码粘贴复制进去更新就OK了!

3.根据你网页文章页面框架的宽度,更改padding-left的值。我网页宽度是845px,则padding-left的值为(845-145)/2=350px

刷新一下你的wordpress文章页面,看看效果吧!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: