在博客或网站添加一个固定在左下角的百度分享按钮

最终效果如下图:

baidufx

将下面的html和css代码添加至需要的页面 ,如果是所有页面都要添加,可以放到footer里。

html代码如下:

  1. <div class=“grid-690 left” id=“main-block”>  
  2. <div id=“bdshare” class=“bdshare_t bds_tools get-codes-bdshare float-share” style=“position: fixed; bottom: 38px; left: 0px; display: block;”>  
  3.   <span class=“share-top”></span>   
  4.   <span class=“bds-tsina”><a class=“bds_tsina” log=“type:3002,menu:1” href=“#”></a></span>  
  5.   <span class=“bds-qzone”><a class=“bds_qzone” log=“type:3002,menu:2” href=“#”></a></span>  
  6.   <span class=“bds-tqq”><a class=“bds_tqq” log=“type:3002,menu:3” href=“#”></a></span>  
  7.   <span class=“bds-renren”><a class=“bds_renren” log=“type:3002,menu:4” href=“#”></a></span>  
  8.   <span class=“bds-mshare”><a class=“bds_mshare” log=“type:3002,menu:5” href=“#”></a></span>  
  9.   <span class=“share-bottom”></span> </div>  
  10. </div>  
  11. <script type=“text/javascript” id=“bdshare_js” data=“type=tools&amp;mini=1&amp;uid=6535084” src=“http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=383965”></script>  

css 代码如下:

  1. <style type=“text/css”>  
  2. #bdshare a:hover, #bdshare_s a:hover, #bdshare_pop a:hover {  
  3. color#333;  
  4. opacity: .8;  
  5. filter: alpha(opacity=80);  
  6. }  
  7. #bdshare a, #bdshare_s a, #bdshare_pop a {  
  8. text-decorationnone;  
  9. cursorpointer;  
  10. }  
  11. .bds_tools a {  
  12. backgroundurl(http://bdimg.share.baidu.com/static/images/is.png?cdnversion=20130712) no-repeat;  
  13. }  
  14. span.bds_more, .bds_tools a {  
  15. displayblock;  
  16. font-family: ‘宋体’,Arial;  
  17. height16px;  
  18. floatleft;  
  19. cursorpointer;  
  20. padding-top6px;  
  21. padding-bottom3px;  
  22. padding-left22px;  
  23. }  
  24. .clearfix {  
  25. zoom: 1;  
  26. }  
  27. #mainblock .float-share {  
  28. width50px;  
  29. height188px;  
  30. positionabsolute;  
  31. displaynone;  
  32. }  
  33. #mainblock .float-share span a {  
  34. displayblock;  
  35. width100px;  
  36. height230px;  
  37. backgroundurl(http://img.baidu.com/img/iknow/exp/new-share.png);  
  38. background-repeat:  no-repeat;  
  39. _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src=“http://img.baidu.com/img/iknow/exp/new-share.png?v=130916”);  
  40. _background: transparent;  
  41. positionrelative;  
  42. cursorpointer;  
  43. background-position: 0 0!important;  
  44. }  
  45. #mainblock .float-share span a:hover {  
  46. left: –50px;  
  47. opacity: 1;  
  48. filter: none;  
  49. _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src=“http://img.baidu.com/img/iknow/exp/new-share.png?v=130916”);  
  50. }  
  51. #bdshare {  
  52. _overflow-x: hidden;  
  53. z-index: 999999;  
  54. padding-bottom2px;  
  55. padding-left2px;  
  56. font-size12px;  
  57. floatleft;  
  58. text-alignleft!important;  
  59. zoom: 1;  
  60. }  
  61. #mainblock .float-share span {  
  62. displayblock;  
  63. overflowhidden;  
  64. width50px;  
  65. height42px;  
  66. background: 0;  
  67. padding: 0;  
  68. }  
  69. #mainblock .float-share .share-top {  
  70. displayblock;  
  71. height10px;  
  72. overflowhidden;  
  73. backgroundurl(http://img.baidu.com/img/iknow/exp/new-share.png) no-repeat;  
  74. }  
  75. #mainblock .float-share .bds_tsina {  
  76. top: –10px;  
  77. }  
  78. #mainblock .float-share .bds_qzone {  
  79. top: –52px;  
  80. }  
  81. #mainblock .float-share .bds_tqq {  
  82. top: –94px;  
  83. }  
  84. #mainblock .float-share .bds_renren {  
  85. top: –136px;  
  86. }  
  87. #mainblock .float-share .bds_mshare {  
  88. top: –178px;  
  89. }  
  90. #mainblock .float-share .share-bottombottom {  
  91. displayblock;  
  92. height10px;  
  93. overflowhidden;  
  94. backgroundurl(http://img.baidu.com/img/iknow/exp/new-share.png) no-repeat 0 –178px;;  
  95. }  
  96. .grid-690 {  
  97. background-repeat:  no-repeat;  
  98. margin: 0 auto;  
  99. padding: 0;  
  100. }  
  101. .left {  
  102. floatleft;  
  103. }  
  104. </style>  

或者在你所用主题目录新建一个名称为:share.php的文件,将以上的代码复制到进去并保存传至服务器,
然后再将调用代码:

  1. <?php wp_footer(); ?>    

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

  1. <?php include(‘share.php’); ?>    

的上面。

未经允许不得转载:ganlei的个人博客 » 在博客或网站添加一个固定在左下角的百度分享按钮

赞 (0)
分享到:更多 ()