[Blogger][Fix] 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 + "&target=email"' 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 + "&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>
<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>
<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>
<a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' 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/AVvXsEh5u_FOa2ekSROgdm6N-uVyfmiOubz9zyElEQDLrRfx3cJ5SrCQj7ZAGl3pYoKqHmgxyApl1Udll92iHMNvu2w-qW735ynpAGsTnCShyT32lgW-fJVSp7LBAVQYCtgUtgr5J4xmFg/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
留言
張貼留言
回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!