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

一直想让百度分享代码实现类似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>

<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>

<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:在此表示对软件库博主的感谢。代码是仿自他的站，他又第一时间给与了无私指导，非常的大度。