聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

一月 27, 2013
» 【Blogger】新增 Plurk 分享按鈕

Blog 改版後凍仁就在文章的下方加入了官方的文章分享按鈕,可惜的是沒有凍仁較常用的 Plurk (噗浪),既然 Blogger 官方沒有,那就自己動手的時間了。

預設的 Plurk 分享按鈕。

當滑鼠移至上方並取得焦點的 Plurk 分享按鈕。

1. 效果預覽


目前的 Plurk 分享按鈕有分標準版(PC 版)與手機版,基於節省效能以及提高速度的構思凍仁選擇了手機版。大家可以藉由以下兩個按鈕連結觀看其差別。

1.1. 標準版 (Standard)

      標準版
<a class="btnPlurk" title="Plurk" href="javascript:void(window.open('http://www.plurk.com/?qualifier=shares&status='.concat(encodeURIComponent(window.location.href)).concat(' ').concat('(').concat(encodeURIComponent(document.title)).concat(')')));">  標準版</a>

1.2. 手機版 (Mobile)

      手機版
<a class="btnPlurk" title="Plurk" href="javascript:void(window.open('http://www.plurk.com/m?qualifier=shares&content='.concat(encodeURIComponent(window.location.href)).concat(' ').concat('(').concat(encodeURIComponent(document.title)).concat(')')));">  手機版</a>

2. Blogger 修改


2.1. 新增 CSS 物件


新版的 Blogger 有個很貼心的設計,那就是「新增 CSS」的選項,我們可以直接在此處自訂 CSS,在管理上真的比舊版好用啊!

2.1.1. 進入 範本 → 進階 → 新增 CSS

2.1.2. 建立 Plurk 分享按鈕的物件,其 a:hover.btnPlurk 是當滑鼠移至上方時會套用的物件。
 1 /* == Plurk share button == */
2 .btnPlurk {
3 background:url(https://lh4.googleusercontent.com/-vUhp29mMCeQ/T7qNwq4zZ5I/AAAAAAAAJ6A/pcRYFKR8ABk/s800/sb-plurk.png) no-repeat left top !important;
4 text-decoration: none;
5 width:20px;
6 height:20px;
7 }
8
9 a:hover.btnPlurk {
10 background:url(https://lh6.googleusercontent.com/-mr20nfcSkiI/T7qNwiRt8wI/AAAAAAAAJ6E/ZsSVRfakkIA/s800/sb-plurk-hover.png) no-repeat left top !important;
11 text-decoration: none;
12 }
13
14 /*
15  * text-decoration: none; //連結不顯示底線。
16  */

[Code on the Pastebin.com]


2.2. 修改 XML


為了避免 Blog 一去不復返,記得修改前請先備份,在範本的右上角有個 備份/還原 的按鈕可以下載 template-*.xml

2.2.1. 範本 → 修改 HTML

2.2.2. 繼續

2.2.3. 展開小裝置範本


2.2.4. 接著找到 <b:includable id='shareButtons' var='post'> 這行開始動工!凍仁曾試著整理縮排,但最後會導致圖示間的間隔過大,不是很美觀。而以下範例中的 <!-- Share with Plurk --> 即是凍仁新增的部份。
 1 <b:includable id='shareButtons' var='post'>
2 <b:if cond='data:top.showEmailButton'>
3
4 <!-- Share with E-mail -->
5 <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'>
6 <span class='share-button-link-text'>
7 <data:top.emailThisMsg/>
8 </span>
9 </a>
10 </b:if>
11
12 <!-- Share by Blogger -->
13 <b:if cond='data:top.showBlogThisButton'>
14 <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'>
15 <span class='share-button-link-text'>
16 <data:top.blogThisMsg/>
17 </span>
18 </a>
19 </b:if>
20
21 <!-- Share with Twitter -->
22 <b:if cond='data:top.showTwitterButton'>
23 <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'>
24 <span class='share-button-link-text'>
25 <data:top.shareToTwitterMsg/>
26 </span>
27 </a>
28 </b:if>
29
30 <!-- Share with Facebook -->
31 <b:if cond='data:top.showFacebookButton'>
32 <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'>
33 <span class='share-button-link-text'>
34 <data:top.shareToFacebookMsg/>
35 </span>
36 </a>
37 </b:if>
38
39 <!-- Share with Plurk -->
40 <a class='goog-inline-block share-button btnPlurk' expr:href='&quot;http://plurk.com/m?qualifier=shares&amp;content=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:blog.title + &quot;: &quot; + data:post.title + &quot;)&quot;' target='_blank' title='分享至 Plurk'>&#12288;</a>
41
42 <!-- Share with Google+ -->
43 <b:if cond='data:top.showOrkutButton'>
44 <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
45 <span class='share-button-link-text'>
46 <data:top.shareToOrkutMsg/>
47 </span>
48 </a>
49 </b:if>
50
51 <b:if cond='data:top.showDummy'>
52 <div class='goog-inline-block dummy-container'>
53 <data:post.dummyTag/>
54 </div>
55 </b:if>
56 </b:includable>

[Code on the Pastebin.com]



2.2.5. 原格式間隔較小,凍仁較喜歡間隔小的感覺,建議使用原格式
1 <b:includable>
2 <b:if cond='data:top.showEmailButton'><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></b:if><b:if cond='data:top.showBlogThisButton'><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></b:if><b:if cond='data:top.showTwitterButton'><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></b:if><b:if cond='data:top.showFacebookButton'><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></b:if><a class='goog-inline-block share-button btnPlurk' expr:href='&quot;http://plurk.com/m?qualifier=shares&amp;content=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:blog.title + &quot;: &quot; + data:post.title + &quot;)&quot;' target='_blank' title='分享至 Plurk'>&#12288;</a><!-- google+ --><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
3 </b:includable>

[Code on the Pastebin.com]


2.2.6. 恭喜您完成了 Blogger 上的 Plurk 分享按鈕,接著讓我們繼續衝浪唄

2012-05-23


原先的 title 變數是 data:post.title,但它只會文章標題,不會連 Blog 的完整名稱都帶入;改用 data:blog.pageTitle 後會變成在主頁時只抓到 Blog 名稱而沒有文章標題。

改用 data:blog.title: data:post.title 後不管是主頁還是獨立文章都可以正常抓到 Blog 名稱與文章標題,搞定收工!

2012-12-11


Wayne Fu 回報才發現上方的程式碼不易複製貼上,凍仁已將程式碼丟一份至 Pastebin.com,希望能幫大家省下些功夫。

延伸閱讀:
[Blogger]如何對文章標題做SEO優化? - 香腸炒魷魚
Abin's Tech Note: 標籤/搜尋頁面只列出標題

資料來源:
ETBlue 外星人寄居地球: Blogger 新增 Plurk 分享按鈕並與無縫整合官方按鈕
如何在我的網站或部落格上加上噗浪分享功能? | 噗浪通訊社 - 噗浪官方部落格(華文)

一月 17, 2012
» Blogger 動態檢視範本

近來看到 Allen Own 前輩開張了 我的密碼沒加密 這個部落格,就覺得挺炫的,看了一下其實是 Blogger 最新的動態檢視(Dynamic View)範本,也就是說接下來凍仁也可以讓自家的 Blog 變得這麼炫!

左上角這裡有個大大的玄機呢!

進入管理頁面後,選範本就可以看到動態檢視的範本了。

套用後還是有些落差,很明顯的看出來沒有收合的感覺。

啟用「網頁」模式。

完成!

只要在網址後補上 view 就可套用在公開的 Blogger 了,Enjoy it!

例:http://jonny.ubuntu-tw.net/view/

資料來源:
啟用動態檢視 - Blogger 說明
Chrome Web Store - Blogger Dynamic Views (by Google)
Blogger Dynamic Views feedback

相關連結:
Official Gmail Blog - Classic style.
M Loves M - Flipcard style.
ADVANCED STYLE - Magazine style.
The Crosby Kitchen - Mosaic style.
Blogger Buzz - Sidebar style.
The Bleary-Eyed Father - Timeslide style.
Blogger Dynamic Views 自由切換閱讀電腦玩物的五種動態版型 | 電腦玩物

十二月 20, 2011
» Blogger 新增 Syntax Highlighting 功能

早在很久之前凍仁就一直很新增這種可以讓各種程式語法自動變色,增加易讀性這樣,有現成的東西是很好沒錯,但凍仁比較想要黑底的感覺阿,先加進來玩玩看了。

1. bash

#!/bin/bash
echo "Hello World :P"

2. java
public class hello_world {
public static void main(String[] args) {
System.out.println("Hello World");
}
}

2011-12-20

c9s 前輩身上得知在 Vim 裡有個 :TOhtml 指令,可以直接把 Code 轉換成 HTML 的格式,這真的是 Vim user 的一大福音啊!

資料來源:
我怕忘記: 設定 Blogger 支援 Syntax Highlighting 功能…
SyntaxHighlighter

十二月 3, 2010
» Ubuntu Note of O'reilly style

凍仁家中其實也有不少 O'Reilly 的書籍,也一直很好奇在電腦書籍中為什麼只有他們家的封面都是用動物當主角,感謝 Edward 分享 為什麼 O'Reilly 都用動物當書籍封面 一文,讓凍仁又長了點見識,當然在最後也小玩一下搞了個假 O'Reilly Ubuntu 筆記。


看起來還真有那麼一回事呢!哪一天就輪到凍仁寫一本啦!!

相關連結:
Animal Menagerie | O'Reilly

資料來源:
O'Reilly Mmaker

十一月 23, 2010
» 【Blogger】企鵝網誌寵物

不知從何時開始,凍仁就開始喜歡上企鵝,連凍仁家的桌機旁邊都擺著 4 隻布偶,也在「企鵝+便利貼-韓國-衣服」的關鍵字下找到了這個療傷系的網誌寵物。



至於為什麼要多個「-韓國」?那是因為近來的 韓國跆拳亞運風波

資料來源:
網誌寵物:企鵝家族 - luckydenny

十月 18, 2010
» 再見了 Windows Live Spaces

好在凍仁在很早之前就離開 Windows Live Spaces 的服務,現在的凍仁可沒有那麼多心力搞 Blog 大搬家,至於怎麼跳到 Pixnet 的部份網路上已經有不少教學文章,只是凍仁沒想到連 Microsoft 都會停止某項服務了,但願網路上那些優質的服務可以賺到錢,並繼續提供服務給他人。

以下是凍仁於 2010/10/16 收到的通知內容。

親愛的 Windows Live Spaces 使用者:
過去六年來,Windows Live Spaces 分享空間致力於協助使用者建立精彩的個人網站,並與朋友共享。有鑒於許多使用者期待 Windows Live 能夠提供更豐富的社交分享體驗,為回應此種使用者需求,我們未來將花更多的心力建立更多元的網路服務,以期能提供給您更豐富的 Windows Live 線上體驗。因此,我們在此很遺憾地通知您,Windows Live Spaces 分享空間線上服務將會在 2011 年 3 月於全球正式終止服務。

然而,為了感謝您長期以來對於 Windows Live Spaces 的使用與支持,我們將與優質夥伴痞客邦 PIXNET 及 WordPress 合作,繼續提供 Windows Live 使用者精彩的部落格平台服務。Windows Live Spaces 分享空間的服務平台預計於 2011 年年初轉成唯讀模式,並預計在 2011 年 3 月於全球正式終止服務。在 Windows Live Spaces 分享空間正式終止之前,我們會協助使用者下載保存自己的 Spaces 分享空間內容,以及協助將內容搬移至痞客邦 PIXNET 或 WordPress 合作夥伴的部落格平台。這段時間內,我們會透過 Spaces 分享空間網頁或 Hotmail 向使用者寄送通知,以提供使用者 Spaces 分享空間的服務狀態,我們也會在 Windows Live 相關網站上提供使用者最新的訊息。

再次感謝您對於 Windows Live 的愛護與支持,請繼續閱讀完本篇文章以獲得充分的資訊,若您想更進一步了解詳細內容,請參閱 Windows Live 更多說明


您現在可以如何計劃您的 Spaces 分享空間呢?
在 Windows Live Spaces 分享空間服務結束前,您可以繼續使用您的 Spaces 分享空間,並利用這段時間思考您想要如何使用部落格資訊。我們非常建議您先進行內容的下載備份,您可以造訪您的 Spaces 分享空間並從網頁上的資訊選擇下載備份的功能。
我們提供四種作法供您選擇:
1) 將您的 Spaces 分享空間下載至您的電腦硬碟作為資料備份 (優先建議) 。
2) 將您的 Spaces 分享空間搬遷轉移至痞客邦 PIXNET 部落格,以體驗更豐富且多元的部落格服務。再來我們將會盡快提供您更進一步的資訊。
3) 將您的 Spaces 分享空間搬遷轉移至 WordPress.com 繁體中文版部落格平台,以體驗更豐富且多元的部落格服務。
4) 將您的 Spaces 分享空間關閉並刪除掉內容資訊。
5) 花點時間想一下要選擇上面哪個方式,並於明年三月之前做出決定。

如果您在 2011 年 3 月 17 日前沒有將您的分享空間下載到您的電腦硬碟做資料備份,或是搬遷 PIXNET 或WordPress 部落格平台,您的資料有可能會永遠消失。在此建議您於 2011 年 3 月 17 日前完成分享空間的資料備份。


如果需要,您可以在論壇或合作夥伴那獲得協助
您可以到 Windows Live Solution Center 查詢線上論壇,有許多常見問題都可以在這邊尋找到答案。如果您有提出問題,請包涵作業時間與等候回覆,若造成任何不便,敬請見諒。

# 凍仁也該找時間備份 Blogger 文章才是,不過現階段還沒有自行架設 Server 的打算就是。

相關連結:
重灌狂人 | 微軟將關閉Windows Live Space部落格服務,建議用戶轉往WordPress

三月 21, 2010
» GTalk Chatback - 拉近訪客的距離

記得很久之前就看過 MSN 有個小按鈕(Button)可以放在 Blog(或一般個人網站) 上,讓訪客知道作者是否在線上,並透過它達到即時溝通的效果,簡略了得先加入好友才可對話的步驟,當然也能提昇安全性。

登入 Google Talk Chatback


填入基本資料:
  • Title:顯示名稱。
  • Your nickname:暱稱。
  • Style:風格,請參考以下圖示。
  • Show your status message:是否顯示狀態。


    Standard


    One line basic


    Two line basic


    Hyperlink and status icon (no frame)


    Hyperlink only (no frame)

最後將 貼至 Blog。

資料來源:
WordPress | Google Talk Widget

八月 3, 2009
» Facebook + Twitter = 微網誌之路

  看到不少社群的朋友都在玩 FacebookTwitter,凍仁也下海玩囉!Facebook 像個強化版的無名,可以很輕易的把自己與朋友串起來,也可以分享彼此的心理測驗..;Twitter 凍仁在 Pixnet 裡有玩過碎碎念,聽說無名裡也有,可 Twitter 可以跨 Blog 的設計很棒。


  加上 Firefox 裡也有對應的 Extension:TwitterBar, TwitterFox,前者可以把網址列輸入的文字直接傳送到 server 端;後者似 Google Reader Watcher 監控未讀數量,並時時掌握朋友間的消息,真的很方便。


  最大的缺點是.. 要身邊有朋友跟著用才好玩,獨樂樂不如眾樂樂啊:(



相關連結:
凍仁的 Facebook

凍仁的 Twitter

support:

biggo.com.tw

biggo.sg

A Django site.