2016年1月4日

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

A+
flat-social-share-button-Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果之前曾介紹過如何「改造 Blogger 官方分享按鈕」,除了增加常用的熱門社群分享按鈕,也讓官方分享按鈕展現不同的風格。

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

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



一、特點


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

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



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

  • 不需要安裝外掛程式,可提升頁面載入速度。
  • 不使用圖片,圖案、顏色純粹使用 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>
<!-- -->




四、補充說明




更多社群分享按鈕工具:

6 則留言:

  1. 請問行動版的"分享按紐"要如何放在手機底部

    回覆刪除
    回覆
    1. 修改行動版需要一定的 Blogger 或語法概念,請先參考「Blogger 行動版範本修改技巧整理」http://www.wfublog.com/2014/04/blogger-mobile-template-custom-tips.html → 瞭解基本概念後,再閱讀這個標籤「Blogger行動版」http://www.wfublog.com/search/label/%E9%9B%BB%E8%85%A6-%20Blogger-%20Hack-%E8%A1%8C%E5%8B%95%E7%89%88 → 參考其他的相關文章,會比較知道行動版怎麼修改。

      刪除
  2. WFU你好,想請問一下目前已經正常安裝分享按鈕於手機/電腦網頁中,

    不過LINE的部分能某加入這個教學內呢?

    LINE的按鈕目前使用

    http://www.wfublog.com/2015/02/line-share-button-mobile-tablet.html

    但是畫面上的圖案有點不協調,所以不知道如果要把LINE加入到本批文章的教學,該如何變動呢?謝謝

    回覆刪除
  3. 第二個問題想請教一下

    像我把這段CODE放到了電腦版、手機板的標題上、文章下,

    在顯示方面有點小異常,異常方面像是:

    2.電腦版網頁可以顯示分享按鈕、但手機板卻顯示不出來。
    (以上是問題2)

    3.因為有設定CODE到文章下,所以在主頁預覽時會在每一篇文章的上下各出現一次分享按鈕,
    不知道能否單獨將首頁文章下的分享按鈕【不要顯示在首頁預覽畫面】呢?
    (以上是問題3)

    分享功能方面,電腦版的主頁預覽畫面中按下文章的分享之後,分享的網址會是網域、而不是該篇文章,

    這部分能否在分享時正確分享到該篇文章的網址、而不是分享本站的URL呢?
    (以上是問題4)

    謝謝

    我的網站
    http://www.wanghenry.com

    回覆刪除
    回覆
    1. 問題1:Line 的安裝程式碼已有多篇文章教學,請自行套用;如不會套用的話請發案給我。

      問題2:手機版的問題請發案給我。

      問題3、4:用判斷式不在首頁顯示即可解決,請搜尋本站相關文章。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。