服务器与VPS
促销优惠信息

百度分享代码自定义侧边栏格式 百度分享代码浮动显示位置自定义

百度分享代码自定义侧边栏格式不知道有没有人尝试过?做为现在最受站长青睐的分享代码,百分分享代码位置自定义浮动显示还缺少一个侧边栏格式,这个格式目前我只在加网发现了。楚狂人本身对代码很菜,尝试着用CSS设定了一下,可以实现,但是不够完美。

首先说百度分享的作用,作为站长,肯定对分享代码不陌生,由于百度在国内搜索引擎的统治地位,百度分享就成了大多数站长的首选。

百度分享一推出,就受到了广大站长和用户的青睐,百度分享的作用大家都是知道的:
1、增加曝光率、提高流量和反链。阅读者把网站内容分享到终端,比方新浪微博、开心网、人人网,就可以增加流量和反链。另外百度分享还有个好处,就是安装了百度分享代码的网站,在百度快照搜索结果的时候会显示被分享的次数,网友在一眼看过去发现这个分享次数时,潜意识对此站是格外信任的。
2、提高网站的排名和权重。原理就是分享得越多(千万是真正的分享,而没有是刷的分享),百度就以为某个网页吸引力大,对网页的评分也就越高。
3、展现网页分享量、提供分享统计以及回访量。免费统计分享次数以及分享去处与回访量。让站长们内心无数,及时调动战略。
4、提高网页抓取速度:百度的分享让蜘蛛更快来抓取网页(有此一说,本人没有验证过)
详细百度分享资料和安装方法请阅读:http://share.baidu.com/

楚狂人今天只是想分享一下百度分享代码自定义侧边栏格式显示的样式,用CSS和JS实现百度分享代码位置自定义浮动显示。百度分享代码自定义

首先是把百度分享代码添加到网页的合适位置,楚狂人在这把它添加到Footer文件里面了,代码如下:

    <div>
<div>
<span>分享</span>
</div>

<div >
<!-- Baidu Button BEGIN -->
<div id="bdshare">
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<span></span>

</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6655851" ></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>
<!-- Baidu Button END -->
</div>

然后是CSS,这段代码添加到style.css文件:

.fixed_share_bar{z-index: 99999; position:fixed;left:875px;top:158px;width:26px;background:#fff}
.vote_btn{ width:26x;height:30px;}
.share_text{position:absolute;left:5px;top:2px;width:22px;font-size:12px}
.shareCount{padding:5px 3px; color:#0066FF; }
#bdshare_s{z-index: 222222; position: relative;}
.bds_tieba{margin-bottom:5px;}

.bds_more{margin-bottom:15px;}

 

 

这样就实现了百度分享代码位置自定义浮动显示,其中left:875px是设定代码的左右距离,top:158px是距离顶部的距离,这样新浪微博、腾讯微博、人人网等图标都显示在文章旁边,随着页面浮动,增加了网友的分享概率,但是目前有一个问题,就是这段代码当遇到分辨率改变时就错位了,本人电脑是1366x768,调试的位置正合适,但是一旦换了其他分辨率的电脑,这段代码就盖住了文字或者侧边栏了,不知如何解决,希望有CSS高手能指出代码中的错误,非常感谢。

因为暂时没有很好的解决不同分辨率错位问题,目前本站的百度分享代码已经更换了横栏式浮动按钮,大家可以在文章页看到演示。个人还是喜欢这个侧边栏式百度分享代码,希望以后有机会能够完善它。

楚狂人 » 百度分享代码自定义侧边栏格式 百度分享代码浮动显示位置自定义

相关推荐

  • 暂无文章

评论 2

  • (必填)
  • (必填)

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏