Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果

之前曾介紹過如何「改造 Blogger 官方分享按鈕」，除了增加常用的熱門社群分享按鈕，也讓官方分享按鈕展現不同的風格。

在行動裝置普及之後，「扁平化設計」開始流行，網頁開始使用簡單的顏色、線條來設計，減少陰影、立體、複雜的圖案，最直接的好處就是「減少圖片的使用後，能加快網頁載入速度」，許多熱門大站現在都是採用這樣的設計。

本篇實作一組扁平化設計的常用社群分享按鈕，並加上簡單的 CSS 動畫，是很實用的範例。

一、特點

上面為四個按鈕的示意圖，要觀看動畫效果及操作，請前往展示頁面：



這組社群分享按鈕的特點如下：

• 不需要安裝外掛程式，可提升頁面載入速度。
• 不使用圖片，圖案、顏色純粹使用 CSS，縮短讀取時間。
• 純粹使用超連結進行分享的動作。
• 滑鼠經過有簡單的動畫

二、安裝 CSS

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<!--扁平化社群分享按鈕-->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'></link>
<style>
.social_buttons {
display: inline-block;
margin-top: 20px;
font-family: Arial, sans-serif;
}

.social_buttons a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all .2s;
-webkit-transition: all .2s;
-moz-transition: all .2s;
}

.social_buttons a:hover {
-ms-transform: translateY(-4px);
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}

.social_buttons i {
width: 32px;
height: 32px;
font-size: 22px;
text-align: center;
}

.social_buttons i:before {
margin: auto;
line-height: 32px;
vertical-align: middle;
}

.social_fb {
background-color: rgb(59, 89, 152);
}

.social_weibo {
background-color: rgb(245, 202, 89);
}

.social_gplus {
background-color: rgb(220, 78, 65);
}

.social_twitter {
background-color: rgb(85, 172, 238);
}

.social_text {
font-size: 12px;
padding: 0 15px 0 5px;
line-height: 32px;
}
</style>
<!-- -->

• 開頭綠色字串這一行，可檢查範本中是否已經裝過「Font-Awesome」這個 Icon 圖示字型，若安裝過可刪除此行
• 其餘的部分，如果對 CSS 熟悉可自行修改參數。

三、安裝分享按鈕

接者可將以下程式碼，安裝在 Blogger 範本中你想顯示的地方。例如想放在文章結束處的話，可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」→「三、文章區塊」→「3. 繼續閱讀」，放在這裡的程式碼後面：

<!--扁平化社群分享按鈕-->
<div class='social_buttons'>
<a class='social_fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.canonicalUrl' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 FB' target='_blank'>
<i class='social_logo fa fa-facebook'></i>
<span class='social_text'>Facebook</span>
</a>
<a class='social_gplus' expr:href='"https://plus.google.com/share?url=" + data:blog.canonicalUrl' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 Google+' target='_blank'>
<i class='social_logo fa fa-google-plus'></i>
<span class='social_text'>Google+</span>
</a>
<a class='social_weibo' expr:href='"http://service.weibo.com/share/share.php?title="+ data:blog.pageName + " @" + data:blog.title + "%0D%0A" + data:blog.canonicalUrl + "&amp;url=" + data:post.canonicalUrl' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 Weibo' target='_blank'>
<i class='social_logo fa fa-weibo'></i>
<span class='social_text'>Sina Weibo</span>
</a>
<a class='social_twitter' expr:href='"http://twitter.com/share?url=" + data:blog.canonicalUrl + "&amp;text=" + data:blog.pageName + " @" + data:blog.title' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 twitter' target='_blank'>
<i class='social_logo fa fa-twitter'></i>
<span class='social_text'>Twitter</span>
</a>
</div>
<!-- -->

四、補充說明

• 由於安裝碼包含 Blogger 語法，因此只能安裝在 Blogger 範本之中。
• 要放在自訂位置的話，請參考「Blogger 範本各區塊程式碼」系列文章，找到其他區塊的擺放位置。
• 如果只想在文章中顯示，請參考「Blogger 七種頁面形態判斷語法詳解」，自行在程式碼前後使用文章頁面的判斷式語法。
• 本篇提供了四個常用的分享按鈕語法，如需使用更多的分享按鈕，可參考「改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕」，自行增添其他按鈕。