添加一个位置固定的百度分享按钮

2013年10月2日 / 网站源码 / 没有评论 / 1,662次

HotNews Pro 2.72集成的固定在页面左侧的百度分享按钮,可方便读者分享自己喜欢的文章,本文教你把这个固定的分享按钮添加到其它主题中。

第一步,在你所用主题目录新建一个名称为:share.php的模板文件,将下面的代码复制到进去并保存:

  1. <div id="share">
  2. <div?class="share">
  3. <div?id="bdshare"?class="bdshare_t?bds_tools?get-codes-bdshare">
  4. <a?class="bds_tsina"></a>
  5. <a?class="bds_tqq"></a>
  6. <a?class="bds_qzone"></a>
  7. <a?class="bds_renren"></a>
  8. <span?class="bds_more"></span>
  9. </div>
  10. <div?style="clear:both;"></div>
  11. </div>
  12. </div>
  13. <script?type="text/javascript"?id="bdshare_js"?data="type=tools&amp;uid=0"?></script>
  14. <script?type="text/javascript"?id="bdshell_js"></script>
  15. <script?type="text/javascript">
  16. document.getElementById("bdshell_js").src?=?"http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion="?+?Math.ceil(new?Date()/3600000)
  17. </script>
  18. <style?type="text/css">
  19. #share?{
  20. display:block;
  21. width:35px;
  22. margin-left:-546px;/*?修改左右位置?*/
  23. position:fixed;
  24. left:50%;
  25. top:420px;/*?修改上下位置?*/
  26. _margin-left:-546px;/*?IE6修改左右位置?*/
  27. _position:absolute;
  28. _margin-top:420px;/*?IE6修改上下位置?*/
  29. _top:expression(eval(document.documentElement.scrollTop));
  30. }
  31. .share?{
  32. background:#fff;
  33. width:24px;
  34. border:?1px?solid?#ccc;
  35. border-radius:5px?0?0?5px;
  36. }
  37. #bdshare_l?{
  38. border-radius:?5px;
  39. }
  40. div?#bdshare_l_c?{
  41. border:?1px?solid?#ccc;
  42. border-radius:?5px;
  43. }
  44. #bdshare?h6,?#bdshare_s?h6,#bdshare?p,?#bdshare_s?p?{
  45. display:none;
  46. }
  47. </style>

第二步,将调用代码:

  1. <?php?include('share.php');??>

添加到主题页脚模板footer.php这句上面:

  1. <?php?wp_footer();??>

以上代码在WP默认主题Twenty Twelve中测试通过,针对不同主题的页面宽度,可适当调整固定按钮的位置,代码中有注释。


提交评论