Typecho添加一个位置固定的百度分享按钮
百度分享是后起之秀,但做得真不错,加载速度也差强人意。我也忘记从什么时候开启,就启用了百度分享这玩意。另外一个最主要的原因是可以自定义来源,就是说,自己申请了一个微博的API,我可以换掉百度的,最终分享出去的来源,是显示自定义的来源,这个就爽多了,不过我目前就只有申请一个新浪微博的通过了,腾讯的太傻×了,没过。
之前是直接显示在文章底部的,其实也还可以,只是有时候看到别人在旁边有一个侧栏显示的,就觉得太喜欢了,太符合我的胃口,于是我就想,自己也弄成这样子的。直到前几天,不知道因为什么原因,点进了知更鸟的博客(可能wordpress的用户知道得比较多,制作主题的,有一款比较流行的CMS主题),然后就看到我想要的功能,还有文章介绍,我一下子就开心起来了,测试,更新到灰狼博客中~~~
这不,就是这效果啦~~~
看了效果,就来说说代码怎么处理吧,代码来自知更鸟的博客:
第一步,在你所用主题目录新建一个名称为:share.php的文件(当然名字随便你起),将下面的代码复制到进去并保存:
<div class="share">
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
<a class="bds_tsina"></a>
<a class="bds_tqq"></a>
<a class="bds_qzone"></a>
<a class="bds_renren"></a>
<span class="bds_more"></span>
</div>
<div style="clear:both;"></div>
</div>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
<script 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?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<style type="text/css">
#share {
display:block;
width:35px;
margin-left:-546px;/* 修改左右位置 */
position:fixed;
left:50%;
top:420px;/* 修改上下位置 */
_margin-left:-546px;/* IE6修改左右位置 */
_position:absolute;
_margin-top:420px;/* IE6修改上下位置 */
_top:expression(eval(document.documentElement.scrollTop));
}
.share {
background:#fff;
width:24px;
border: 1px solid #ccc;
border-radius:5px 0 0 5px;
}
#bdshare_l {
border-radius: 5px;
}
div #bdshare_l_c {
border: 1px solid #ccc;
border-radius: 5px;
}
#bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p {
display:none;
}
</style>
第二步,将调用代码:
至于位置,就看你个人喜好了,如果是文章页面才需要的话,可以添加到post.php页面,或者是底部,但加一个条件判断。其他扩展的你懂的
我对这个稍微做了点调整,先是CSS,再是HTML。
不过还是需要优化下的,合并到主题里面进去,更方便代码管理。做法是CSS加到主题的CSS,这个对整个博客基本上没影响,对其他页面,出现多余的CSS也没影响,JS放页面底部,不影响页面HTML加载。
当然,不同主题,上面代码中的宽度是不一样的,需要根据需要进行调整。这个不止在typecho,其实在任何网站都可以用的。
添加更多的百度分享网站按钮点此查看方法
转载本站原创文章请注明:文章转自 挨踢路,链接: https://986554.ykncch.asia/articles/1928.html
不懂代码默默飘过
其实我也不太懂,乱折腾的
顶 支持博主 加油了
效果不错,我这次主要是谢谢博主给我意见,现已作出改善,谢谢!
还是不够明显,我建议是有边框,背景之类的差别
- - 我觉得这个东西看起来不美观 而且还碍事。
我的网站整体风格是 白灰黑 就不挂这个了。
去掉背景就好了,我觉得加这个也可以玩一下的。我已经调整到右下角了
想放到文章底部,不知如何弄
独立为一个文件,放到模板里面,想什么位置就放什么位置