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

龙哥
龙哥
龙哥
1123
文章
35
评论
2013年10月2日10:56:29 评论 127 1631字阅读5分26秒

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中测试通过,针对不同主题的页面宽度,可适当调整固定按钮的位置,代码中有注释。

添加更多的百度分享网站按钮点此查看方法

转载请注明: WordPress主题修改菜鸟教程 | 知更鸟 +复制链接

继续阅读
匿名

发表评论

匿名网友 填写信息