自定义百度分享样式固定侧栏-CSS样式

这个教程是鸟哥那里转载过来的，不过我做了个小小修改，因为我在运用到其他网站的时候出现样式冲突，修改被冲突的DIV就好了，HTML代码如下：

  1. <!-- 分享 -->  
  2. <div id="share-baidu">    
  3.     <div class="share-baidu">    
  4.         <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">    
  5.             <a class="bds_tsina"></a>    
  6.             <a class="bds_tqq"></a>    
  7.             <a class="bds_qzone"></a>    
  8.             <a class="bds_taobao"></a>  
  9.             <a class="bds_qq"></a>  
  10.             <span class="bds_more"></span>    
  11.         </div>    
  12.         <div style="clear:both;"></div>    
  13.     </div>    
  14. </div>    
  15. <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=0" ></script>    
  16. <script type="text/javascript" id="bdshell_js"></script>    
  17. <script type="text/javascript">    
  18. document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)    
  19. </script>    

把这个代码放到网站页脚，后面的taobao和qq，是我自己改的，大家可以参考这里 自定义！

然后把下面这个样式表加在自己的样式表文件里面

  1. <style type="text/css">  /* 如果直接加在html文件里请带上 */  
  2. #share-baidu {    
  3.     display:block;    
  4.     width:35px;    
  5.     margin-left:-546px;/* 修改左右位置 */    
  6.     position:fixed;    
  7.     left:50%;    
  8.     top:420px;/* 修改上下位置 */    
  9.     _margin-left:-546px;/* IE6修改左右位置 */    
  10.     _position:absolute;    
  11.     _margin-top:420px;/* IE6修改上下位置 */    
  12.     _top:expression(eval(document.documentElement.scrollTop));    
  13.     }    
  14. .share-baidu {    
  15.     background:#fff;    
  16.     width:24px;    
  17.     border: 1px solid #ccc;    
  18.     border-radius:5px 0 0 5px;    
  19.     }    
  20. #bdshare_l {    
  21.     border-radius: 5px;    
  22.     }    
  23. div #bdshare_l_c {    
  24.     border: 1px solid #ccc;    
  25.     border-radius: 5px;    
  26.     }    
  27. #bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p {    
  28.     display:none;    
  29.     }    
  30. </style> /* 如果直接加在html文件里请带上 */  

-baidu 是被我修改过的DIV，因为，如果直接用share有时候会和某些网站主题样式冲突，所以改了DIV名称！

另外，如果加在CSS文件里面，不需要前后两个style标签，如果是直接加载显示文件的话，就需要了，这个，会点代码的人应该都懂...

文章参考：http://zmingcx.com/fixed-baidu-share-button.html

baidu-share

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论：1   其中：访客  0   博主  0   引用   1

评论加载中...

来自外部的引用： 1

  • 轻松几步自定义百度分享-打造个性化的百度分享按钮 | SDT技术网

发表评论

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

图片 表情