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

Update（2012-03-05 10:50）:

亲们注意哦，白色背板的图标表示你还未+1，蓝色背板的图表（上图）表示已经+1。两种状态可以互相切换。也就是说，在蓝色背板状态下再次点击相当于“-1”。

该功能需要你已经登录了google。

图标显示会比较慢，如果一直看不到图标，说明被墙了。

 

可以墙住的是对google的访问，墙不住的是对google的喜欢！

在博客上添加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+按钮就在你的博客中安家了，希望这个功能能够给你带来朋友和流量，呵呵。