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

WordPress486.2K阅读模式

百度分享

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

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

 

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  48  访客  38  作者  5
    • Louis Han
      Louis Han 6

      这个位置很不错啊

        • johnny
          johnny 0

          @ Louis Han ie不是太好使

          • 我爱动感单车网
            我爱动感单车网 7

            @ Louis Han :razz: 虽然我所使用的主题已经将百度分享集成到了文章页面里,但是一直来很是希望还能够在首页、分类等页面也出现,按照鸟哥介绍的方法已经添加好来了。效果如何感兴趣的朋友可以去我博客看看,欢迎与雪儿交流WordPress的各种使用心得哦。

          • 度娘
            度娘 1

            感谢鸟哥分享,非常适用~~~

            • wk
              wk 1

              你好博主,能否在你博客上投放淘宝广告呢,希望得到你的回复。

              • 香水控
                香水控 3

                鸟哥,在手机上看两个地方错位,1:我又加了一个关注按钮,有些错位了,2:左侧分享按钮跑左右角了。

                能加个判断,如果在手机上显示,分享代码在最下面居中显示吗?

                  • 知更鸟
                    知更鸟

                    @ 香水控 主题不适合手机浏览器,请安装移动版主题

                      • 香水控
                        香水控 3

                        @ 知更鸟 好的,
                        鸟哥,还有个问题,
                        由于我们这备案不允许有留言功能,在哪个地方可以把留言板隐藏掉?

                    • 永恒之塔
                      永恒之塔 2

                      感谢鸟哥,这东西还真不错。

                      • 围挡
                        围挡 4

                        这样会不会出现很多代码?

                        • csbaike
                          csbaike 1

                          请问Opera浏览器(电脑版)上分享按钮错位到页面底部了是什么原因?

                          • 工业制冷
                            工业制冷 2

                            谢谢分享,不错。

                            • kodango
                              kodango 0

                              这个方法很好,用上了,感谢楼主

                              • 天下足球网
                                天下足球网 0

                                这个方法很好,用上了

                                • 我爱上QQ
                                  我爱上QQ 6

                                  我安装了最新版的知更鸟主题没有左侧固定分享按钮…

                                  • 枫先生
                                    枫先生 2

                                    很好用~~谢谢了

                                    • 天下足球网
                                      天下足球网 0

                                      主题不适合手机浏览器,请安装移动版主题

                                      • 路人呵呵
                                        路人呵呵 0

                                        楼主 你的文章里高亮代码用的是什么插件或者其它的什么的
                                        灰常感谢

                                        • 老虎
                                          老虎 6

                                          鸟哥什么时候出一款宽屏版(或自适应屏幕)的hotnewspro?毕竟现在的主题在Mac上看着已经不爽了……
                                          如果没有此计划,那有没有相关的设置可以自己修改?

                                          • iKan88
                                            iKan88 1

                                            鸟哥,您好。请问,是否可以用相同方法添加“百度喜欢”按钮?新人小白,不懂勿笑。

                                            • 永恒之塔基地
                                              永恒之塔基地 2

                                              添加了,可是为什么要提示代码错误呢?

                                              • 逆袭者
                                                逆袭者 1

                                                测试一下 看成不成

                                                • 枫丹白露业主
                                                  枫丹白露业主 1

                                                  还是滑动的好,不用考虑固定的样式了

                                                  • 灰狼
                                                    灰狼 0

                                                    代码借用了~~~

                                                    • xinghaixu
                                                      xinghaixu 3

                                                      这个分享按钮在我的笔记本14寸屏幕上显示有问题,只能显示出小小的一个框,里面没有任何东西。

                                                        • 知更鸟
                                                          知更鸟

                                                          @ xinghaixu 分享按钮在我的笔记本13.3寸屏幕上显示一切正常

                                                            • 倚天雪
                                                              倚天雪 4

                                                              @ 知更鸟 我大概知道是什么原因了。开启广告过滤之后,里面没有内容,只有一个框。我也是今晚才发现的。

                                                            • 倚天雪
                                                              倚天雪 4

                                                              @ xinghaixu 我大概知道是什么原因了。开启广告过滤之后,里面没有内容,只有一个框。我也是今晚才发现的。与你分享。

                                                            • yumanutong
                                                              yumanutong 6

                                                              哇哦,不错,我之前还想问这个怎么实现的,找到了

                                                              • cynic
                                                                cynic 0

                                                                鸟哥,那个“将HotNews主题视频模版应用到首页”里面的独立视频模版在哪里啊?我在网站找了半天都没看见

                                                                • 80后脱口秀
                                                                  80后脱口秀 0

                                                                  不错非常实用

                                                                  • 番茄
                                                                    番茄 2

                                                                    我的博客也搞定这个固定分享按钮了,给力。

                                                                    • 爱娇妻
                                                                      爱娇妻 1

                                                                      我想问一下,文章内的代码是怎么插入的?用的是什么插件呢?@知更鸟

                                                                      • znow
                                                                        znow 0

                                                                        集成到主题的分享按钮,怎样修改才能在分享时,带上一张当前分享的文章中的图片呢?

                                                                        • 智享互联
                                                                          智享互联 3

                                                                          如何控制贴着某个div的边框滚动啊 如你的。

                                                                          • 幻月无名
                                                                            幻月无名 3

                                                                            鸟哥,我看到你的网站分享链接下面有分享到微信朋友圈啊,但您的主题里面没有,能不能共享下代码啊,谢了啊!

                                                                              • 知更鸟
                                                                                知更鸟

                                                                                @ 幻月无名 http://zmingcx.com/hotnews-pro-plus-faq.html
                                                                                第18条

                                                                                  • 幻月无名
                                                                                    幻月无名 3

                                                                                    @ 知更鸟 鸟哥,你这回复速度也太快了,我提交了留言以后就没刷新页面,然后就自己研究了下,看了看你的网站源码,自己弄好了以后本来想告诉你我弄好了,结果你已经回复了,这速度,太佩服了,万分感谢,就是网站备案还没下来,没法展示啊,只能在本地自己欣赏下了。

                                                                                  • 幻月无名
                                                                                    幻月无名 3

                                                                                    @ 幻月无名 搞定了,鸟哥,谢了,“偷”的你的网站源码和CSS源码,嘻嘻

                                                                                匿名

                                                                                发表评论

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

                                                                                拖动滑块以完成验证