分享工具条
这个功能是我在“Wordpress大学”看到的，第一眼看到就非常喜欢，像把其剽窃下来，无奈，一直没有时间，正好今天下午有空，索性把他扒下来，装载到我的博客上，帅呆了，满足感100%，哈哈！ 工具条功能还是非常全面的，而且样子也很好看：
实现也面简单的，当然，我是直接拿“大学”的css，几乎没改，只是把图片链接折腾了一下，换到了BAE，速度怎一个快字了得
把下方代码贴到你想显示工具条的位置：
<div id="share_toolbar_wrapper" style="position: static; top: auto; z-index: 9999;"> <div id="share_toolbar"> <div class="stb_group" id="stb_article_view" title="本文围观次数"> <span id="stb_article_view_icon"></span> <span id="stb_view_count"><?php post_views(' ', ' '); ?></span> </div> <div class="stb_divide"></div> <div data="{'url':'<?php the_permalink() ?>'}" class="bdshare_t bds_tools get-codes-bdshare stb_group stb_share_buttons" id="bdshare"> <a href="javascript:void(0);" id="stb_btn_weibo" class="bds_tsina" title="分享到新浪微博"></a> <a href="javascript:void(0);" id="stb_btn_tqq" post_url="" class="bds_tqq" title="分享到腾讯微博"></a> <a href="javascript:void(0);" id="stb_btn_qzone" class="bds_qzone" title="分享到QQ空间"></a> <a href="javascript:void(0);" id="stb_btn_renren_small" class="bds_renren" title="分享到人人网"></a> <span id="stb_btn_more" class="bds_more"><span id="stb_sbtn_more_icon"></span></span> <a href="javascript:void(0);" class="shareCount"></a> </div> <div class="stb_divide"></div> <div class="stb_share_buttons stb_group"> <!-- 上一篇 --><a id="stb_btn_prev"<?php previous_post_link('%link'); ?></a> <!-- 下一篇 --><a id="stb_btn_next"<?php next_post_link('%link'); ?></a> </div> <div class="stb_group_right"> <div class="stb_like_btn" id="alipay_btn"><a href="https://me.alipay.com/gsky" target="_blank" title="捐助作者，与您共勉">.</a></div> <div class="bdlikebutton stb_like_btn bdlikebutton-blue bdlikebutton-small bdlikebutton-small-blue"> <div class="bdlikebutton-inner"> <!-- 处理百度like按钮点击和like数量 --> <span class="bdlikebutton-add"><div class="bdlikebutton"></div></span> <div class="bdlikebutton-count"><script id="bdlike_shell"></script> <script>var bdShare_config = {"type":"small","color":"blue","uid":"4520644"}; document.getElementById("bdlike_shell").src="http://bdimg.share.baidu.com/static/js/like_shell.js?t=" + Math.ceil(new Date()/3600000);</script> </div></div></div> </div> </div>
分享工具条代码使用注意事项：
绿色标注的是文章点击次数代码，根据个人设置，替换文章点击统计
黄色标注的是支付宝收款主页链接，如果还没有？可以到这里申请一个
蓝色标注的百度喜欢按钮，替换为自己的就可以了，喜欢按钮获取地址
添加好代码后，剩下的工作就是添加css了，下方css来自“Wordpress大学”
CSS样式代码如下：
/*分享工具条*/ #share_toolbar{background:none repeat scroll 0 0 #FCFCFC;border:1px solid #DDDDDD;border-radius:5px 5px 5px 5px;height:33px;line-height:33px;width:700px;_display:none;} #share_toolbar_wrapper{background:none repeat scroll 0 0 #FFFFFF;padding-top:8px;} #stb_article_view{width:70px;} #stb_article_view #stb_article_view_icon{background:url(http://bcs.duapp.com/picsky/share.gif) no-repeat scroll 0 0 transparent;display:block;height:14px;margin:3px auto 1px;width:18px;} #stb_article_view span{color:#AAAAAA;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:11px;text-align: center;line-height:12px;margin:0 5px;} .stb_group,.stb_divide{display:block;float:left;} .stb_divide{background:url(http://bcs.duapp.com/picsky/share.gif) no-repeat scroll 1px -19px transparent;height:33px;width:9px;} .stb_submenu_link{position:relative;} .stb_submenu_box{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:none repeat scroll 0 0 #FCFCFC;border-color:-moz-use-text-color #DDDDDD #DDDDDD;border-image:none;border-right:1px solid #DDDDDD;border-style:none solid solid;border-width:0 1px 1px;display:none;padding:10px;position:absolute;top:34px;} .stb_share_buttons a{background:url(http://bcs.duapp.com/picsky/share.gif) repeat scroll 0 0 transparent !important;display:block;float:left;height:25px !important;margin:4px 0 0 5px;text-indent:-99999px;width:81px;} #share_toolbar .stb_share_buttons a:hover{margin-top:3px !important;} #stb_btn_weibo{background-position:0 -57px !important;padding:0;} #stb_btn_weibo_small{background-position:-83px -57px !important;padding:0;width:27px;} #stb_btn_tqq{background-position:0 -83px !important;padding:0;} #stb_btn_tqq_small{background-position:-83px -83px !important;padding:0;width:27px;} #stb_btn_qzone{background-position:0 -135px !important;padding:0;} #stb_btn_qzone_small{background-position:-83px -135px !important;padding:0;width:27px;} #stb_btn_renren{background-position:0 -109px !important;padding:0;} #stb_btn_renren_small{background-position:-83px -109px !important;padding:0;width:27px;} .stb_share_buttons_small{left:-30px;width:150px;} .stb_share_buttons_small a,#stb_sbtn_more_icon{background:url(http://bcs.duapp.com/picsky/share.gif) repeat scroll 0 0 transparent;display:block;float:left;height:16px;margin:1px 0 0 3px;text-indent:-99999px;width:16px;} .stb_share_buttons_small a:hover{margin-top:0;} #stb_btn_more{background:none repeat scroll 0 0 transparent !important;display:block;float:left;height:33px;margin:0 0 0 3px;padding:0;width:25px;} #stb_sbtn_more_icon{background-position:-20px 0 !important;margin-top:9px;} #stb_btn_prev,#stb_btn_next{background-position:-9px -24px !important;width:33px;} #stb_btn_next{background-position:-42px -24px !important;margin-left:0;width:32px !important;} .stb_group_right{float:right;height:33px;width:205px;overflow:hidden;} .stb_like_btn{float:left;margin:4px 5px 0 0;} #stb_like_gplus{margin-right:-20px;margin-top:7px;} #alipay_btn a{float:left;padding:0;width:107px;background:url(http://bcs.duapp.com/picsky/alipay.png) no-repeat;color:#CBCBCD} #alipay_btn a:hover{margin-top:-1px;} .bdlikebutton{float:right;margin:4px 5px 0 0;} .stb_share_buttons .shareCount{width:1px;} #bdshare .shareCount{background:none repeat scroll 0 center transparent;color:#5895BE;margin-top:8px;text-indent:0;} #share_toolbar #bdshare .shareCount:hover{margin-top:8px !important;} #bdshare{margin-right:5px;} @media screen and (min-width:1260px) and (max-device-width:1340px){#wrap-right{width:234px} } @media screen and (min-width:1340px){#wrap-right{width:320px;} .comment-list .s_r{width:85%;} #h_control li{padding:5px 25px 5px 10px;} } @media screen and (max-width:1260px){#wrap-right{display:none;} }
css样式代码注意事项：
绿色标注的为常量按钮，已经存放在了百度BAE，请下载后存放在自己的空间，并修改绿色标注的图片地址
黄色标注为支付宝收款按钮，请下载后存放在自己的空间，并修改黄色标注的图片地址
强烈建议您修改图片默认地址，天空团 不保证图片可以永久使用
完成了这些操作并保存后，赶快看看你的添加分享工具条的地方吧，效果是不是很棒呢？
有呢`~~~ :razz: :razz:
哇塞，这个相当不错啊
那就给主题加上吧，哈哈
这个是ipc.me或者异次元上的，早就扒过，很漂亮
平时我都上课，逛博客也只是逛固定的几个，所以很晚才发现这个功能…
其实最主要的是我没找到教程，不然我也懒的折腾…
Very Nice 的工具栏~
话说你应该把JS也贴出来 :cool:
貌似这个没用到js额，除了百度喜欢，是要去百度开放平台申请的…
好巧，我也是今天加上的，不过我的主题自带分享，以前被关闭了，没注意 :razz:
自己定制不错，之前我弄过一个分享，不好看，嘿嘿
还没看到手指头
第一篇文章没有“百度喜欢”按钮，不知道怎么弄…
坑爹啊。。。手指头太小
IE也有这个效果？
没在IE下测试过…
怪了，我的留言呢？
代码太长
折腾起来还是很简单的，总共就两部分
:?: 城城 怎么不行？？帮我~~弄下 http://pan.baidu.com/share/link?shareid=136851&uk=3306955388 发下我邮箱咯 你知道的啦~~qq邮箱 唔 两个 图片地址 http://www.zmgos.com/gongjulan/share.gif http://www.zmgos.com/gongjulan/alipay.png 谢谢咯
唔 地址 复制下在打开吧 貌似你的外链转内链会指向别处
亲，我没弄外链转内链
亲 把鼠标放在链接上 看看浏览器左下角吧~~~~
停，你说的是哪里的链接？我要解释一下：
1、文章里的链接均为直链
2、留言者的链接均已转内链，并新窗口打开…
3、其他地方我没动，应该没有转内链，你找找，告诉我一下呗
Bingo！第二个....我不就是在留言里挂上的连接么~~~百度盘连接跳转失败哦~~~~要改的文件在这里 别忘了帮我改哦 http://pan.baidu.com/share/link?shareid=138922&uk=3306955388
喔~~~~城城 帮我改~~
这个分享条挺好看的，只是我的文章好像从来没人分享的。 :neutral:
额额，好吧，我承认，个人博客加这个纯属自慰…
+（更多）没作用，上下篇需加个title
上下一篇我加titie会错误，纠结，有空细细琢磨
ajax没作用？
你是说我网站评论没Ajax效果么？不知道怎么情况，这几天部分地区加载不出来，我用正常，CDN什么的我都指到国外了…
我还是觉得，清爽些好。
还好啦，这个也不怎么复杂，主要是看中了省空间，而且还功能多…
不跟着你折腾了，真累
来点六味地黄丸，让你脉动回来！嘎嘎
这模板好看
看起来好棒的模板
异次元上见过这分享条。
没逛过异次元，汗颜啊～
好像bshare跟这个类似
这个功能稍强，不占多余空间
:cool: 貌似不错哦！不过我博客的模版是黑的，好像不太适合。。
改一下CSS就好了啊
能不改就不改直接装插件最简单
想法不错，如果有时间，可以考虑做成插件，可惜没空…
不错，喜欢支付宝那个捐赠图标，哈哈
貌似支付宝默认就这个样式…
嗯，不错，支持下。。。
很喜欢你博客的主题，博主能不能给一个！
我是改的zine，你用的不正是zine么？
这个功能很不错，很多博客都有了，对我这菜鸟来说还是算了吧，不敢折腾。
一点点尝试就出来了
:eek: 看起来很不错！改天也弄个试试。。
冰柠貌似不能访问？
拆了。。。
挺好，支持下
浅城的博客又改版了，我月考完了，终于有时间来鼓捣博客了。我要大改版咯。整合JS、CSS、换成又拍云的CDN :mrgreen: :mrgreen:
话说我博客哪里改版了额，还是之前的样子啊，没多大变化。
你换到阿里云了？牛叉啊，俺都买不起、、、、
其实还可以加上窗口跟随
窗口跟随？什么东东，举个栗子
怎么没看到这个效果呢？
像CM那样浮动的怎么做知道不？ :eek:
CM?什么东东。。。
弄上了。弄这个的途中也顺便解决了CM主题为什么改了CSS会错乱的问题，原来还是编码问题。UTF-8竟然分无BOM版。。。
我汗，我从来都是在后台改主题，所以没遇到过BOM问题
CM的css有标注以UTF-8模式读取，但是很多主题都是没标的，可能是这个问题，我也不晓得
很多网站用这种分享栏...
这么晚还没睡觉呀
就是倡萌建的那个wordpress大学么？非常不错，码盲试试 :cool:
恩，就是倡萌的那个大学
想给你淘点代码用,
一个代码是图片显示分享按钮,
一个代码是留言板的那,可以显示所有留言者的留言条数,我超喜欢的!
图片分享是在百度分享里能找到，但是你第二个问题我没明白，纠结
就是你的留言版啦,有头像显示的,很不错
你是说那个留言板么？榜上有名
对啦，QQ联系！ :eek:
这个工具栏还是很炫的哦，可是我现在很少去折腾WP了，折腾的累啊
感觉你博客也蛮好看的说，有不少地方要借鉴呢
[...] 注意：本原文来自天空团 ，修改了很多，原代码不能实现分享和工具条移动 [...]
我把它放js文件里，就像IPC.me一样,但在文章页怎样调用？求解！我调用好像不行，还要在文章页再与其代码？
在页脚调用一下就行了
不是吧！！
你这个分享按钮不能用吧，以为没有百度分享按钮js，只加载了like按钮的js。经过努力，终于修改好了。
可真晕死我，百度一下别的教程吧，别人弄的，比我扒的强大多了
百度一搜,不用扒
那时候我是纯学习性的扒。。。