在你的博客中增加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+按鈕就在你的博客中安家了，希望這個功能能夠給你帶來朋友和流量，呵呵。