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

一直想让百度分享代码实现类似Jiathis的侧栏式分享代码格式,但是百度没有提供类似代码,楚狂人只好自己在网赚博客(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“ 。其中需要用到的JS文件和图片文件我已经打包了,大家可以回复后下载,多谢支持。

[url href=https://www.chukuangren.com/url/bashare.html]点击下载[/url]

下载解压后把share文件夹上传到”themes“文件夹下面,此处需要注意是themes而不是你的wordpress主题文件夹哦,如果你要放在主题文件夹下面,请自行修改代码中的文件网址。

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

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

赞(1) 领红包
转载注明:楚狂人博客 » 百度分享代码实现类似Jiathis侧栏式分享代码 侧边栏百度分享按钮

评论 28

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #13

    需要学习

    电大大 4年前 (2015-05-13) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  2. #12

    好用,一定要

    zmm 4年前 (2014-12-17) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  3. #11

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

    东北大米 5年前 (2014-08-08) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  4. #10

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

    半块糖 5年前 (2014-05-27) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  5. #9

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

    练字方法 5年前 (2014-05-12) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  6. #8
    我已在此站月赚数千不夸张 5年前 (2014-05-11) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  7. #7

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

    哈皮猫 6年前 (2013-05-29) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  8. #6

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

    书客电子书论坛 6年前 (2013-05-28) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  9. #5

    这个不错。感谢分享

    LYT博客 6年前 (2013-05-28) 来自天朝的朋友 未知浏览器 Unknow Os 回复
  10. #4

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

    公子 6年前 (2013-05-20) 来自天朝的朋友 谷歌浏览器 Windows XP 回复
    • @公子 嗯,你用的那个浮动式的我也用过,还分享过方法,这次刚换掉

      楚狂人 6年前 (2013-05-21) 来自天朝的朋友 火狐浏览器 Windows XP 回复
  11. #3

    高级用法啊

    Louis Han 6年前 (2013-05-18) 来自天朝的朋友 火狐浏览器 Windows 7 回复
  12. #2

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

    胡倡萌 6年前 (2013-05-17) 来自天朝的朋友 谷歌浏览器 Windows 7 回复
    • @胡倡萌 是的,我确实很不熟悉啊,如果您能帮助完善就好了

      楚狂人 6年前 (2013-05-17) 来自天朝的朋友 火狐浏览器 Windows XP 回复
  13. #1

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

    IT路人 6年前 (2013-05-16) 来自天朝的朋友 谷歌浏览器 Windows 7 回复
    • @IT路人 嗯,见仁见智,个人偏好

      楚狂人 6年前 (2013-05-17) 来自天朝的朋友 火狐浏览器 Windows XP 回复

扫码领红包 或者 支付宝搜索:5981405

支付宝扫一扫打赏