前幾天介紹了如何在Blogger網誌中加入浮動式的Facebook粉絲框，今天繼續介紹另一個也很常見的浮動式社群按鈕，要達到這種效果Google一下就非常的多了，而我同樣也選出一個比較方便套用的語法給大家參考，這語法的原始出處是來自於「BloggerSentral」，別被這語法給嚇到，其實要套用時一點也不複雜，只要依照本文的說明進行即可，呈現的效果可參考下圖或至我的Demo網站實際觀看
推薦閱讀：[Blogger] 在網頁側邊加入浮動式Facebook粉絲團外掛Widget，三分鐘搞定
【套用語法的步驟】
套用的步驟很簡單：請至Blogger後台→選擇「版面配置」→「新增小工具」→建立「HTML/JavaScript」並把下面的語法貼入後儲存即可，就這麼簡單啦
<!– floating share bar Start bloggersentral.com–> <style type=”text/css”> #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;} </style> <div id=’pageshare’ 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=”40″ data-show-faces=”false”></div> </div> <div class=’sbutton’ id=’rt’> <a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”vertical” >Tweet</a> <script src=’http://platform.twitter.com/widgets.js’ type=”text/javascript”></script> </div> <div class=’sbutton’ id=’su’> <script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script> </div> <div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’> <script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script> <a class=”DiggThisButton DiggMedium”></a> </div> <div class=’sbutton’ id=’gplusone’> <script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></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> <!– floating share bar End –>
【客製化調整】
上面的語法當然不可能適用每一個人，所以按鈕出現的位置可能會有一點出入，因此我們再來要稍微的做一些調整，以符合自己網站的版面需求：
- 調整語法「bottom」後面的數值：當這個數字越大時，那麼浮動按鈕就會越往上
- 調整語法「margin-left」後面的數值：這是用來調整浮動按鈕的左右位值，如果負值越大，那麼就會越靠左，負值越小則越靠右，所以我們只要把這個數字調整一下，就可以貼齊我們的發文區或想要放置的地方了
- 每一個分享按鈕都是用以下語法包起來的，可以自行調整排序或者把不要的按鈕拿掉，例如在台灣Stumbleupon、Digg目前已經不流行，各位就可以考慮去掉
<div class=’sbutton’>
BUTTON CODE (按鈕語法)
</div>