Tagged under: , , ,

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

changebloggersharebutton

想來點變化嗎?官方公版的 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>

Blogger Offical ShareButton有的話(通常會有),只要找到 <data:post.body/>,把 <b:include data='post' name='shareButtons'/> 加上去,理論上就會出現官方的 ShareButton。

實作

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

/*sharebutton*/
.share-button{width:30px;height:30px;background:url(http://lh3.googleusercontent.com/_iOYD41FxEhQ/TZrisRjHs8I/AAAAAAAAFTA/c7rnhFD-jQ0/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-4

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

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

0 回應:

張貼留言

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!