在你的博客中增加google+按钮

来源:互联网 发布:屏蔽弹窗软件 编辑:程序博客网 时间:2024/06/06 17:30
 

在博客上添加Google +1 按钮,可以让你的访问者在 Google 搜索上推荐、在 Google+ 上分享你的博客内容。

有人在本博公布的皮肤的那篇博文中提出了增加Google+1按钮的问题。严格来说,这不属于皮肤的范畴。因为皮肤只是定义css样式,不改变页面元素。但是好吧,既然你要,我就给你。

首先,在你的公告栏中增加如下内容:

<!-- 将此标记放在您希望呈现 +1 按钮的位置 --><g:plusone></g:plusone><!-- 将此呈现调用放在适当的位置 --><script type="text/javascript">  window.___gcfg = {lang: 'zh-CN'};  (function() {    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;    po.src = 'https://apis.google.com/js/plusone.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);  })();</script>
复制代码

就可以看到+1 按钮了。

 

但总是有人不满足(比如我)。你可能希望+1按钮出现在顶部的导航菜单上,这就需要定义css。在后台css设置中增加:

#___plusone_0{     position: absolute;      left: 555px;      top: 8px;      z-index: 999999;}
复制代码

其中left、top是+1按钮在页面中的绝对位置,你可以根据自己的皮肤自行调整;

z-index设置一个很大的值,保证+1按钮在所有元素的上面。

 

如果你的菜单是fix的(固定,不随页面滚动而滚动),那么你当然会希望+1按钮也随着菜单一起“fix”,那么就继续增加css定义,变成这样:

#___plusone_0{    position: absolute;    left: 555px;    top: 8px;  z-index: 999999;  overflow: visible;    position: fixed;}

增加了overflow和position属性的定义,+1按钮就会不受页面滚动的影响,一直显示。

至此,google+按钮就在你的博客中安家了,希望这个功能能够给你带来朋友和流量,呵呵。

 

原创粉丝点击