[Blogger Tune] Change Blogger ShareButton！一個步驟換掉你的 Blogger 官方分享按鈕！

想來點變化嗎？官方公版的 ShareButton 雖然乾淨好用，但有時候稍嫌小了點，偶爾也會想換個樣子對吧？

只需要一個步驟，利用 CSS 和一張圖，就可以搞定囉！

前話

先從啟用 ShareButton 談起，如果你的版型沒有官方的 ShareButton 的話，先找找看有沒有這一段

<b:includable id='shareButtons' var='post'>
  <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
  <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
  <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
  <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
  <a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
    <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

找到 <data:post.body/>，把 <b:include data='post' name='shareButtons'/> 加上去，理論上就會出現官方的 ShareButton。

實作

貼上這一段 CSS 在 </style> 或者 ]]></b:skin> 之前：

/*sharebutton*/
.share-button{width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim8i0oXubFCNOX3zHrahN6jlCne-dfR7c0De6NXJrlhW71LTwOshAGlq5u8IHTKxZwJW3JEcw7MsFvjQGmVsn2oAz_LliT_00cjwM669OAqtOKsgEm1l37cfl3oVQGG0iioqW9J8svFqoH/s800/sharebutton-4.png) no-repeat left !important;overflow:hidden;margin-left:-1px;position:relative}
a.sb-email {background-position: 0px 0px !important;}
a.sb-blog {background-position: -30px 0px !important;}
a.sb-twitter {background-position: -60px 0px !important;}
a.sb-facebook {background-position: -90px 0px !important;}
a.sb-buzz {background-position: -150px 0px !important; width: 30px;}
a.sb-email:hover {background-position: 0px -30px !important;}
a.sb-blog:hover {background-position: -30px -30px !important;}
a.sb-twitter:hover {background-position: -60px -30px !important;}
a.sb-facebook:hover {background-position: -90px -30px !important;}
a.sb-buzz:hover {background-position: -150px -30px !important;}

解說一下，官方的按鈕是 20px 的大小，而我做的是 30px 的大小，你也可以自己做圖來改，把上面有底線的那一個圖片連結改掉就可以了。很簡單吧？！簡單就請你按個讚囉！

官方的 Sharebutton 整個 bar 的圖寬是 120px，有六個按鈕，其中第五個是沒有出現的 Orkut 按鈕，我照著做了一個寬 180px，六個按鈕的圖。

使用的圖示來源：Double-J Design

文章分類：Blogger FixTune