2014年4月16日 星期三

Blogger安裝Plurk噗浪Share分享按鈕

Blogger目前有提供一些社群的分享按鈕,如:Facebook臉書Like讚按鈕Google+的+1按鈕等,不過並沒有提供Plurk噗浪Share分享按鈕,如果想為每一篇文章加上P按鈕,那該如何實現呢?這時需自行手動來安裝此按鈕,把P按鈕與其它分享按鈕一起放在文章的尾端。



Plurk噗浪Share分享按鈕是灰階按鈕,當把滑鼠移到上方,要變成彩色按鈕,因此要藉助CSS的功能來完成此需求,不過首先,要先把灰階與彩色的這2張圖示,上傳到你的圖床上。

灰階按鈕。


彩色按鈕。



CSS代碼

.sb-plurk {
    background:url(http://4.bp.blogspot.com/-rjIRCd2Dw9U/U046p66U_EI/AAAAAAAABmc/wf6qWOZ6hGs/s1600/sb-plurk.png) no-repeat left top !important;
    text-decoration: none;
    width:20px;
    height:20px;
}

a:hover.sb-plurk {
    background:url(http://4.bp.blogspot.com/-NC0hYFrrn4o/U046p60QY6I/AAAAAAAABmg/LWKBppO16T4/s1600/sb-plurk-hover.png) no-repeat left top !important;
    text-decoration: none;
}


  1. 在圖示上方點右鍵,另存影像到你的電腦中。
  2. 上傳到你的Picasa網路相簿上。
  3. 加入這2張圖片到你的文章空白處,只是為了取得圖片網址,記得之後要在文章中移除。
  4. 按下HTML,查看代碼,複製這2個圖片的網址,然後在文章中,再把剛剛加入的那2個圖片移除。
  5. 用你圖床上的圖片網址,取代原本CSS代碼中的圖片網址。
















Blogger允許你自訂CSS,所以把修改後的CSS代碼,利用範本設計工具,貼在範本中。

  1. 版面配置。
  2. 範本設計工具。
  3. 進階。
  4. 新增 CSS。
  5. 把CSS代碼貼到新增自訂 CSS的本文框中。









其實打開範本(編輯HTML),就可以看到剛剛貼上的CSS代碼,只是Mix利用後台操作而已,你也可以直接編輯HTML,把CSS代碼貼在 </b:skin>之前。




到目前為止,Mix已經完成了CSS代碼部份,是為了讓按鈕看起來更生動,接下來才是真正要安裝按鈕。

至於如何完成HTML代碼,可以參考:Blogger安裝Plurk噗浪Share分享按鈕(2),這篇文章。



沒有留言:

張貼留言