Typecho添加一个位置固定的百度分享按钮

百度分享是后起之秀,但做得真不错,加载速度也差强人意。我也忘记从什么时候开启,就启用了百度分享这玩意。另外一个最主要的原因是可以自定义来源,就是说,自己申请了一个微博的API,我可以换掉百度的,最终分享出去的来源,是显示自定义的来源,这个就爽多了,不过我目前就只有申请一个新浪微博的通过了,腾讯的太傻×了,没过。

之前是直接显示在文章底部的,其实也还可以,只是有时候看到别人在旁边有一个侧栏显示的,就觉得太喜欢了,太符合我的胃口,于是我就想,自己也弄成这样子的。直到前几天,不知道因为什么原因,点进了知更鸟的博客(可能wordpress的用户知道得比较多,制作主题的,有一款比较流行的CMS主题),然后就看到我想要的功能,还有文章介绍,我一下子就开心起来了,测试,更新到灰狼博客中~~~

这不,就是这效果啦~~~

Typecho特价固定的百度分享按钮

看了效果,就来说说代码怎么处理吧,代码来自知更鸟的博客:

 第一步,在你所用主题目录新建一个名称为:share.php的文件(当然名字随便你起),将下面的代码复制到进去并保存:

<div id="share">  
<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&amp;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>

 第二步,将调用代码:  

<?php include('share.php'); ?>

至于位置,就看你个人喜好了,如果是文章页面才需要的话,可以添加到post.php页面,或者是底部,但加一个条件判断。其他扩展的你懂的

我对这个稍微做了点调整,先是CSS,再是HTML。

不过还是需要优化下的,合并到主题里面进去,更方便代码管理。做法是CSS加到主题的CSS,这个对整个博客基本上没影响,对其他页面,出现多余的CSS也没影响,JS放页面底部,不影响页面HTML加载。

当然,不同主题,上面代码中的宽度是不一样的,需要根据需要进行调整。这个不止在typecho,其实在任何网站都可以用的。

 添加更多的百度分享网站按钮点此查看方法

查看 wordpress 百度 Typecho 百度分享的相关文章

转载本站原创文章请注明:文章转自 灰狼IT路,链接: https://itlu.org/articles/1928.html

已有 9 条评论

  1. 不懂代码默默飘过

    1. 其实我也不太懂,乱折腾的

  2. 顶 支持博主 加油了

  3. 效果不错,我这次主要是谢谢博主给我意见,现已作出改善,谢谢!

    1. 还是不够明显,我建议是有边框,背景之类的差别

  4. - - 我觉得这个东西看起来不美观 而且还碍事。

    我的网站整体风格是 白灰黑 就不挂这个了。

    1. 去掉背景就好了,我觉得加这个也可以玩一下的。我已经调整到右下角了

  5. 回复 jack jack

    想放到文章底部,不知如何弄

    1. 独立为一个文件,放到模板里面,想什么位置就放什么位置

添加新评论