[Blogger] 如何在文章側邊加入浮動式的社群網站分享按鈕


前幾天介紹了如何在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 –>

客製化調整

上面的語法當然不可能適用每一個人,所以按鈕出現的位置可能會有一點出入,因此我們再來要稍微的做一些調整,以符合自己網站的版面需求:

  1. 調整語法bottom」後面的數值:當這個數字越大時,那麼浮動按鈕就會越往上
  2. 調整語法margin-left後面的數值:這是用來調整浮動按鈕的左右位值,如果負值越大,那麼就會越靠左,負值越小則越靠右,所以我們只要把這個數字調整一下,就可以貼齊我們的發文區或想要放置的地方了
  3. 每一個分享按鈕都是用以下語法包起來的,可以自行調整排序或者把不要的按鈕拿掉,例如在台灣Stumbleupon、Digg目前已經不流行,各位就可以考慮去掉

<div class=’sbutton’>
BUTTON CODE (按鈕語法)
</div>