由於中文搜尋結果～教學文章好像不多（關鍵字問題？），所以筆者就獻醜了...。使用情況就像下圖（直接看文章左側也一樣啦）。
步驟如下
《1》依照自己的需求取得按鈕的程式碼，以本文為例僅提供 Facebook 和 Google+ 兩種。
- 〈Facebook〉請到「Facebook developers」選取樣式並取得程式碼。如下圖所示，於左側框架選擇自己想要的樣式，樣式結果會顯示在框架的右上角，確認後按下「Get Code」。
- 〈Google+〉跟上述一樣，到「Google developers」取得程式碼。
《2》將前述取得的程式碼整合後，至 Blogger 後台的版面配置新增「HTML/JavaScript 小工具」，貼入如下面的程式碼～最後儲存即大功告成。（PS.由於概念來自 BloggerSentra，所以就不拿掉人家附註的東西了，很 care 的人請自己想辦法）
<!-- 浮動按鈕 Start-->
<style type="text/css">
#pushbutton {position:fixed; bottom:15%; margin-left:-100px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pushbutton .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pushbutton' title="Get this from BloggerSentral.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"></div>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'zh-TW'}</script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- 浮動按鈕 End-->
《補充說明》
1.「pushbutton」可自行更名，不要跟原有的衝突即可。其他部分也可更名，但未免麻煩就直接套用了吧！
2.「bottom:15%;」數字越大，顯示位置越高。
3.「margin-left:-100px;」負數越大，顯示位置越靠左。
4.「background-color:#fff;」是背景色，請自行變更。不需要背景色就拿掉。
5.按鈕的語法是用下述方式包起來，還需要新增其他按鈕的可依樣畫葫蘆繼續添加。
<div class='sbutton'>
.....我是被包起來的語法.......
</div>
6.「藍色字」部分就是從「Facebook developers」取得的。
7.「橘色字」部分則是從「Google developers」取得的。
8.「zh-TW」是按鈕語系部分，想要英文就變更成「en_US」...依此類推。
9.如果使用後按鈕沒法正常顯示，那就需要動到範本文件了。請到後台範本...
找到這一行
<body expr:class='"loading" + data:blog.mobileClass'>
或者這一行<body>
將《2》整段程式碼，再次貼到「<body expr:class='"loading" + data:blog.mobileClass'>」或「<body>」的下面即可。
10.不知道是個人範本改到出事還是怎樣？測試結果一定得把「HTML/JavaScript 小工具」貼在下圖的位置，按鈕才能正常顯示。原因筆者不清楚～哈！
11.既然這是新增「HTML/JavaScript 小工具」的作法，就會使版面出現工具名稱，既不美觀也很奇怪。解決方式就是進入後台範本文件，找到剛剛新增的小工具～大概長相如下。將「<h2 class='title'><data:title/></h2>」這一行用附註語法「<!-- ... -->」包起來，這樣就不會見到看似突兀的空白小工具杵在頁面上了。
<b:widget id='HTML4' locked='false' title='浮動分享按鈕' type='HTML'>
..............
<!-- <h2 class='title'><data:title/></h2> -->PS.其實「HTML/JavaScript 小工具」若沒有命名標題就不需要此項作法，但建議加上命名來增加範本文件與版面配置的辨識度。
12.本文的作法會讓按鈕出現在首頁、單篇、搜尋...各種頁面，但如果只想讓按鈕出現在單篇文章中呢？畢竟這種推文按鈕主要作用就是顯示該篇文章被「推」了幾次，讓它出現在首頁、搜尋頁面好像沒啥幫助，是吧？所以可以在《2》整段程式碼加上頁面判斷語法，如下述：
<b:if cond='data:blog.pageType == "item"'>
《2》整段程式碼，效果只會呈現在單篇文章中。
</b:if>
黃色文字部分可替換如下：
「index」首頁、標籤、搜尋頁面
「archive」歷史文章列表
「item」單篇文章頁面
「static_page」靜態頁面（網址含 "/p/" 的頁面）
PS.其實首頁有按鈕也沒什麼啦！可看成是「推」部落格本身囉！
2.「如何在文章側邊加入浮動式的社群網站分享按鈕」
3.「Adding floating social media sharing buttons」
4.「Blogger 頁面判斷式(PageType)的各種應用」
最新回應
留言板
推薦連結
謝謝!!!!!!!!!!!!!!!!!!!!!!
回覆刪除真的發了文耶~~~
熱心助人的阿啦~~~~~
^^ 感謝
呵～沒弄成文章不好說明，順便自己做個筆記，試試看吧！
刪除但... 你好像加上了一些code
回覆刪除不能copy 阿
你拉到底下的參考，到3.「...」的網址去copy，一樣的。多的按鈕部分你再回來對照這一篇。
刪除行啦行啦~~~
刪除很好啊
阿啦! 我給你十萬個讚!
恭喜 ^^
刪除提醒你一下，在我的的螢幕(1280*800)內，側邊浮動欄會被切掉唷^^
回覆刪除因為某些因素我把版面調整的比較寬，所以文末又加了按鈕供訪客使用，謝謝提醒喔！
刪除倒是我把兩個範本文件（正常與不正常）對照了一整晚，也看不出哪裡出問題導致SyntaxHighlighter無法正常運作...，呵～宣告放棄 XD
我這麼肉腳...發到社群不好意思 >"<
回覆刪除PS1.我放棄SyntaxHighlighter的複製功能了，把迷你組件全勾選回復預設～結果也一樣，
繼續使用偷吃步的方式好了 XD
PS2.倒是對照了一整晚好像意外修好了串聯摺疊回覆的老問題，現在回覆不用一直掃餅乾，呵～意外收獲，希望不是錯覺。
SyntaxHighlighter的複製功能?
回覆刪除就是甚麼的功能?
請見「範例」
回覆刪除那阿啦你有用嗎?
回覆刪除1.沒 0.0 ，用不了，原因請看 #3 - #4。
回覆刪除2.主要是查找上述原因，還有串聯回復的舊問題。
btw～我這幾天才發現 slideshare 變成只有註冊者才能下載（以往的「搜尋」功能也沒了），所以把舊的 PDF 轉到 Google 的雲端空間了，它上傳 PDF 檔案能內嵌，共用後能選擇是否提供下載，給你參考。