Blogger官方分享按鈕修改間距與顯示位置的方法[免外掛]
如果不想安裝外掛程式或其他的程式碼，只是單純調整Blogger官方的各分享按鈕(facebook,twitter,google+等)之間的距離，讓分享按鈕明顯一點，或改變分享按鈕在網頁中顯示的位置，這裡提供的方法如下：
到 Blogger 後臺 →【範本 】→【 編輯 HTML】按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F )，搜尋字串<b:includable id='shareButtons' var='post'>
將<b:includable id='shareButtons' var='post'>···</b:includable>點開，會看到官方6個分享按鈕的程式碼，如下圖
其中分別是
email按鈕程式碼
可以調整按鈕程式碼的排序，來改變官方6個分享按鈕在網頁中顯示的左右位置。
若要增加分享按鈕的間距有兩個方法
方法一、在兩個按鈕程式碼之間加入   (空格的XML轉義字元)即可，要空兩格就加入  ，以此類推。
方法二、將按鈕程式碼用 margin 控制距離，如
<span style='margin-left:40px'>facebook按鈕程式碼</span>
會使facebook按鈕與左方的按鈕有40px的距離。在每個按鈕程式碼前加入<span style='margin-left:40px'>後加入</span>，完成後分享按鈕會如下圖呈現
這樣就完成Blogger官方分享按鈕之間距離的調整。若要在原本的位置顯示，不做改變，就到這裡結束。
如果還要調整分享按鈕在網頁中顯示的位置，請繼續往下看。
要調整分享按鈕在網頁中顯示的位置，比如在頁尾的第一行顯示，也就是文章一結束就顯示分享按鈕。首先要搜尋分享按鈕的顯示程式碼。
按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F )，搜尋字串class='post-share-buttons
紅框內的分享按鈕顯示程式碼等一下要剪下，貼在新位置。
接著搜尋字串<div class='post-footer-line post-footer-line-1'>
此字串有兩個，範本中預設的第一個是行動版的，這篇文章是修改網頁版的，所以第二個才是要放的位置。回到剛剛分享按鈕的顯示程式碼，剪下紅框內程式碼，貼在第二個<div class='post-footer-line post-footer-line-1'>的下一行，如下圖
這樣便會在文章一結束就顯示分享按鈕。
也可以在分享按鈕上方加上一些文字敘述，比如「分享文章」，如要文字置中及調整文字大小，可在敘述文字的前後各加入<div style='text-align: center;font-size: 17px;'>和</div>，如下圖
這樣官方分享按鈕便會如下圖呈現(文章一結束就顯示分享按鈕且在分享按鈕上方加上文字敘述「分享文章」)
推薦網誌：宜蘭傳藝中心門票限時優惠買1送1 - 小美輕鬆旅
到 Blogger 後臺 →【範本 】→【 編輯 HTML】按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F )，搜尋字串<b:includable id='shareButtons' var='post'>
將<b:includable id='shareButtons' var='post'>···</b:includable>點開，會看到官方6個分享按鈕的程式碼，如下圖
email按鈕程式碼
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if>
blog按鈕程式碼
<b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if>
twitter按鈕程式碼
<b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if>
facebook按鈕程式碼
<b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if>
Pinterest按鈕程式碼
<b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if>
Google+按鈕程式碼
<b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
可以調整按鈕程式碼的排序，來改變官方6個分享按鈕在網頁中顯示的左右位置。
若要增加分享按鈕的間距有兩個方法
方法一、在兩個按鈕程式碼之間加入   (空格的XML轉義字元)即可，要空兩格就加入  ，以此類推。
方法二、將按鈕程式碼用 margin 控制距離，如
<span style='margin-left:40px'>facebook按鈕程式碼</span>
會使facebook按鈕與左方的按鈕有40px的距離。在每個按鈕程式碼前加入<span style='margin-left:40px'>後加入</span>，完成後分享按鈕會如下圖呈現
如果還要調整分享按鈕在網頁中顯示的位置，請繼續往下看。
要調整分享按鈕在網頁中顯示的位置，比如在頁尾的第一行顯示，也就是文章一結束就顯示分享按鈕。首先要搜尋分享按鈕的顯示程式碼。
按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F )，搜尋字串class='post-share-buttons
接著搜尋字串<div class='post-footer-line post-footer-line-1'>
此字串有兩個，範本中預設的第一個是行動版的，這篇文章是修改網頁版的，所以第二個才是要放的位置。回到剛剛分享按鈕的顯示程式碼，剪下紅框內程式碼，貼在第二個<div class='post-footer-line post-footer-line-1'>的下一行，如下圖
也可以在分享按鈕上方加上一些文字敘述，比如「分享文章」，如要文字置中及調整文字大小，可在敘述文字的前後各加入<div style='text-align: center;font-size: 17px;'>和</div>，如下圖
