百度分享代码实现类似Jiathis侧栏式分享代码 侧边栏百度分享按钮

阿里云双十一活动

云服务器低至86元/年

立刻拼团

声明:本站文章多为楚狂人原创,偶尔网络转载部分内容,如有侵权请联系我们!

一直想让百度分享代码实现类似Jiathis的侧栏式分享代码格式,但是百度没有提供类似代码,楚狂人只好自己在IT博客(www.chukuangren.com)试验过几次,但是苦于对代码不是很熟悉,做出来的侧栏式分享代码对浏览器以及显示屏尺寸不能够兼容和自适应,经常错位的惨不忍睹。今天又见到一款漂亮的侧边栏百度分享按钮,用了一下午的时间仿制了下来,这是目前最让我满意的分享代码样式了,不忍独享,贡献出来供大家参考。实现样式如下图:

好了,话不多说,下面来说下实现侧栏式分享代码的详细教程:

1、首先在CSS中添加:

/* 分享 */
.fixed-share-bar {
border-right: 1px solid #CAD5ED;
left: 50%;
margin-left: -618px;
position: fixed;
top: 193px;
width: 62px;
}
.share-bar-top {
background: url("/wp-content/themes/share/images/score.png") no-repeat scroll 0 0 transparent;
height: 83px;
}
.fixed-share-bar .comment-total {
color: #FFFFFF;
display: block;
font-family: arial;
line-height: 16px;
padding: 9px 0 0 7px;
text-align: center;
width: 50px;
}
.fixed-share-bar .comment-total:hover, .fixed-share-bar .comment-total:visited {
color: #FFFFFF;
text-decoration: none;
}
.share-bar-btn {
background: none repeat scroll 0 0 #F5F8FD;
border-left: 1px solid #CAD5ED;
float: none !important;
padding: 6px 0 4px;
}
.share-bar-bottom {
background: url("/wp-content/themes/share/images/score.png") no-repeat scroll 0 -89px transparent;
font: 0px/0 arial;
height: 6px;
width: 62px;
}
.share-bar-btn a, .share-bar-btn .bds_more {
background: url("/wp-content/themes/share/images/score.png") no-repeat scroll 0 0 transparent !important;
display: block;
float: none !important;
height: 32px !important;
margin: 0 auto !important;
padding: 0 0 10px !important;
width: 32px !important;
}
.share-bar-btn .bds_qzone {
background-position: -75px 0 !important;
}
.share-bar-btn .bds_tsina {
background-position: -116px 0 !important;
}
.share-bar-btn .bds_tqq {
background-position: -157px 0 !important;
}
.share-bar-btn .bds_kaixin001 {
background-position: -199px 0 !important;
}
.share-bar-btn .bds_renren {
background-position: -282px 0 !important;
}
.share-bar-btn .bds_more {
background-position: -240px 0 !important;
margin-bottom: 0;
}

2、然后在网页代码的</body>前面添加:

<div><div><a id="arti_comm_num_1">分享<br>收藏</a> </div>
<div id="bdshare"><a title="分享到腾讯微博"></a><a title="分享到新浪微博"></a><a title="分享到QQ空间"></a><a title="分享到人人网"></a><a title="分享到开心网"></a><span></span> </div><div></div></div><!-- Baidu Button END -->

<!--修改下两行的你的域名-->

<script type="text/javascript" src="http://你的域名/wp-content/themes/share/js/switch.js"></script>

<script type="text/javascript" src="http://你的域名/wp-content/themes/share/js/share2013.js"></script><script type="text/javascript"> var linums = '0';$(document).ready(function() {$(".autoswict").lazyNavi("","cur",200,1,'.autoswict,.show_pic');$(".autoswict").autoNavi("","cur",2000,1,'.autoswict,.show_pic');var xiazai_photo = document.getElementById("xiazai_photo");linums = xiazai_photo.getElementsByTagName('li').length;xiazai_photo.style.width= linums*150 +'px';var desk_photo= document.getElementById("desk_photo");jlinums = desk_photo.getElementsByTagName('li').length;desk_photo.style.width= jlinums*150 +'px';adj_func();adj_func1();adj_func2();});var ii = jj =1;var iwidth = jwidth = 0;function next_12(){if (Math.ceil(linums/6) - 1 >= ii){iwidth = iwidth - 150 *6;$('#xiazai_photo').animate( { left: iwidth+'px' },500 );ii++;if (Math.ceil(linums/6) - 2 <= ii) $('.t_right').hide();}$('.t_left').show();}function prv_12(){if (ii > 1){iwidth = iwidth + 150*6;$('#xiazai_photo').animate( { left: iwidth+'px' },500);ii--;if (ii+1 > 1) $('.t_left').hide();$('.t_right').show();}}function nextpic_12(){if (Math.ceil(jlinums/6) - 1 >= jj){jwidth = jwidth - 150 *6;$('#desk_photo').animate( { left: jwidth+'px' },500 );jj++;if (Math.ceil(jlinums/6) - 2 <= jj) $('.j_right').hide();}$('.j_left').show();}function prvpic_12(){if (jj > 1){jwidth = jwidth + 150*6;$('#desk_photo').animate( { left: jwidth+'px' },500);jj--;if (jj+1 > 1) $('.j_left').hide();$('.j_right').show();}}$("#soft4000").lazyNavi("","cur",200,1);$("#soft111").bind("mouseenter",function(){$("#cat1110").animate({opacity:"show"},200)});$("#soft111").bind("mouseleave",function(){$("#cat1110").animate({opacity:"hide"},200)});</script>

<!--修改下一行的百度分享ID-->

<script src="http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion="+ Math.ceil(new Date()/3600000) type="text/javascript" id="bdshare_js" data="type=tools&uid=6655851"></script><script src="http://bdimg.share.baidu.com/static/js/shell_v2.js?t=14" type="text/javascript" id="bdshell_js"></script><script type="text/javascript">document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours();</script>

注意里面uid=6655851此处换成你自己的百度分享代码ID,然后把里面两个JS地址中”你的域名“处换成你自己的网址,例如我的域名是”www.chukuangren.com“ 。

鉴于楚狂人并非专业程序员,对代码不够熟悉,如果代码中有冗余代码或者其他错误,希望大家有熟悉代码的朋友可以指出来,本人将不胜感激。虽然本博客的定位是网赚博客,但在网上赚钱的闲暇之余也要允许折腾点其他爱好嘛,我会继续改造自己的网站,也会把改造过程分享出来,希望大家喜欢,谢谢。

PS:在此表示对软件库博主的感谢。代码是仿自他的站,他又第一时间给与了无私指导,非常的大度。

转载请注明:作者:楚狂人, 转载或复制请以 超链接形式 并注明出处 楚狂人博客
原文地址:《百度分享代码实现类似Jiathis侧栏式分享代码 侧边栏百度分享按钮》 发布于2013-05-14

分享到:
赞(1) 打赏

评论 28

3 + 8 =
  1. #13

    需要学习

    电大大5年前 (2015-05-13)回复
  2. #12

    好用,一定要

    zmm5年前 (2014-12-17)回复
  3. #11

    很不错的分享,谢谢博主的无私奉献,会持续关注,望博主分享更多干货~
    粳米http://www.himph.com/

    东北大米5年前 (2014-08-08)回复
  4. #10

    呃,去年的文章了哦,下载地址已经失效了~

    半块糖6年前 (2014-05-27)回复
  5. #9

    正想在侧边栏加一个分享代码呢,有用,欢迎站长回访我的网站恋字坊http://www.lianzifang.com/

    练字方法6年前 (2014-05-12)回复
  6. #8
    我已在此站月赚数千不夸张6年前 (2014-05-11)回复
  7. #7

    找了好长时间,终于在这里找到了。只是我的是phpwind7.5的论坛,测试多次没成功。 大神这个论坛用不上吗?

    哈皮猫7年前 (2013-05-29)回复
    • 这个分享代码其实什么站都可以用的

      管理员楚狂人7年前 (2013-05-29)回复
  8. #6

    请问这个适用于PHPWIND论坛吗?

    书客电子书论坛7年前 (2013-05-28)回复
    • 适用的,并不局限于wordpress

      管理员楚狂人7年前 (2013-05-28)回复
  9. #5

    这个不错。感谢分享

    LYT博客7年前 (2013-05-28)回复
  10. #4

    我是用到文章内页了。。。

    公子7年前 (2013-05-20)回复
    • 嗯,你用的那个浮动式的我也用过,还分享过方法,这次刚换掉

      管理员楚狂人7年前 (2013-05-21)回复
  11. #3

    高级用法啊

    Louis Han7年前 (2013-05-18)回复
    • 呵呵,惭愧

      管理员楚狂人7年前 (2013-05-18)回复
  12. #2

    看样子这个东西的底部应该还有一部分没有显示(或者没有设计)。代码还可以写的更加灵活,看来博主对WordPress函数还不是很熟悉

    胡倡萌7年前 (2013-05-17)回复
    • 是的,我确实很不熟悉啊,如果您能帮助完善就好了

      管理员楚狂人7年前 (2013-05-17)回复
  13. #1

    我还是喜欢把分享放在标题右侧或者文章内容下面 那两个位置更容易引人注意

    IT路人7年前 (2013-05-16)回复
    • 嗯,见仁见智,个人偏好

      管理员楚狂人7年前 (2013-05-17)回复
百度分享代码实现类似Jiathis侧栏式分享代码 侧边栏百度分享按钮

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

每天拆双十一超级红包
双十一超级红包 1111

知道创宇云安全
切换登录

注册