<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d10420665\x26blogName\x3dTaiwan+Powers+Blogger\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://twpowers.blogspot.com/search\x26blogLocale\x3dzh_TW\x26v\x3d2\x26homepageUrl\x3dhttps://twpowers.blogspot.com/\x26vt\x3d9222143503209465673', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Taiwan Powers Blogger

把blogger變得讓台灣人覺得更好用

在 blogger 上加上 Mac OS X 的 dock 效果

作者: zonble 發表時間:2005-04-04

最近我在#osxchat blog上做了一個類似 Mac OS X 圖形使用者環境中的 dock 效果,這是透過 java script 完成的,作法如下:

<script type="text/javascript"> 首先要宣告這是一段 // javascript

names = new Array(11); // 宣告一個 array 存放名字
names[1] = "zonble";
names[2] = "mjhsieh";
names[3] = "gugod";
names[4] = "lukhnos";
names[5] = "mikeliu";
names[6] = "orcas";
names[7] = "julian9";
names[8] = "momizi";
names[9] = "whiteg";
names[10] = "b6s";

icon = new Array(11); // 宣告一個 array 存放圖片網址
icon[1] = "http://www.flickr.com/photos/1239483_7cccdc79b5_t.jpg"; //zonble
icon[2] = "http://www.flickr.com/photos/924056_71ce07c844_t.jpg"; //mjhsieh
icon[3] = "http://www.flickr.com/photos/1024441_30e440460f_t.jpg" //gugod
icon[4] = "http://www.flickr.com/photos/1024410_9ef37cf996_t.jpg" //lukhnos
icon[5] = "http://www.flickr.com/photos/924048_f9cd762e60_t.jpg"; //m3744 mikeliu
icon[6] = "http://www.flickr.com/photos/1024434_e442a7af22_t.jpg"; //orcas_cs
icon[7] = "http://www.flickr.com/buddyicons/25132758@N00.jpg?1100853684"; //julian
icon[8] = "http://www.flickr.com/buddyicons/24827808@N00.jpg?1100248842"; //momizi
icon[9] = "http://www.flickr.com/buddyicons/65404987@N00.jpg?1099641278"; //whiteg
icon[10] = "http://flickr.com/buddyicons/68102773@N00.jpg?1099499124"; //b6s

urls = new Array(11); // 宣告一個 array 存放每個人 blog 的網址
urls[1] = "http://zonble.twbbs.org"; //zonble
urls[2] = "http://http://apple.sysbio.info/~mjhsieh/"; //mj
urls[3] = "http://gugodl.org/"; //gogle
urls[4] = "http://luknos.org/wp/"; //lukhnos
urls[5] = "http://photozone.blogdns.org/blog/space/start"; //mikeliu
urls[6] = "http://blogs.infoecho.net/echo/"; //orcas
urls[7] = "http://homepage.mac.com/julian9/Home/Menu3.html"; //julian
urls[8] = "http://momizi.z6i.org/" //momizi
urls[9] = "http://blog.whiteg.net/" //whiteg
urls[10] = "http://b6s.blogspot.com/" //b6s

function a(a){ //這個 funtion 的用途是,讓每次滑鼠移動到某個 icon 上之後,放大張圖片以及前後兩張圖片的大小
var item = 'ouricon' + a;
var zoom = document.getElementById(item);
var itemdiv = 'icondiv' + a;
var zoomdiv = document.getElementById(itemdiv);
var itemline = 'iconline' + a;
var zoomline = document.getElementById(itemline);
zoom.style.width = "45px";
zoomdiv.style.width = "45px";
zoomline.style.display = "block";
if(a > 1) {
a1 = a -1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "40px";
zoomdiv.style.width = "45px";
}
if(a < 10) {
a1 = a + 1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "40px";
zoomdiv.style.width = "45px";
}
}

function b(a){ //在滑鼠移開的時候,還原成原始大小
var item = 'ouricon' + a;
var zoom = document.getElementById(item);
var itemdiv = 'icondiv' + a;
var zoomdiv = document.getElementById(itemdiv);
var itemline = 'iconline' + a;
var zoomline = document.getElementById(itemline);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
zoomline.style.display = "none";
if(a > 1) {
a1 = a -1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
}
if(a < 10) {
a1 = a + 1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
}
}

function dock(){ //最後,這是實際把 dock 印出來的部份,可以看到用了很多 CSS 語法
document.write('<div style=\"margin: 0 auto 0 auto; width: 440px; height: 60px; padding-right: 10px; margin-top: -35px; valign: bottom;\">');
for(i=1;i < 11; i++) {
document.write('<div style=\"display: block; width: 40px; float: right;\" id=\"icondiv'+ i + '\"><div style=\"margin:0; text-align: center;\"><a href=\"'+ urls[i] +'\"><img src=\"' + icon[i] + '\" id=\"ouricon' + i +'\" onmouseover=\"a(' + i + ')\" onmouseout=\"b(' + i + ')\" style=\"width:30px; border: 1px solid #333; margin: 0;\"/></a></div><div style=\"display:none; font-size: 9pt; font-weight: bold; margin: 0; text-align: center; color: #000; padding: 0;\" id=\"iconline' + i +'\">'+ names[i] +'</div></div>');
}
document.write('</div>');
}

</script>

您可以在修改模板的時候,把這段語法放在<head>當中,然後在 body 當中的適當位置插入:

<script type="text/javascript"> dock(); </script>

這樣就可以了。

替 Blogger.com 外掛 trackback

作者: barabbas 發表時間:2005-01-30

Blogger.com 不知道為什麼一直不支援 trackback,前陣子我在自家 blog 稍微抱怨這件事時,好心人路過告訴我一個還不錯的解決方案http://www.haloscan.com/

接下來就做個示範,一步一步地替這裡加上 trackback 功能吧!

首先,註冊個帳號。

HaloScanSignUp

註冊完畢,登入之後,看到這個畫面,直接點 next。

HaloScanStep1

現在照著這一頁的說明,把 Step 1 的東西貼進 template。但是注意,Step 2 貼的時候要小心,別把自己原有的 comment 那一段也蓋掉了!而且 postCount 那段是不必要的,只要貼 postCountTB 那段進去就好

HaloScanStep2

舉例來說,本來這裡的 comment template 是:

<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">" title="permanent link"><$BlogItemDateTime$></a>
<mainorarchivepage><blogitemcommentsenabled>

<a class="comment-link" href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">#comments">
<$BlogItemCommentCount$> comments</a>
</blogitemcommentsenabled></mainorarchivepage> <$BlogItemControl$>
</p>


Step 2 貼上去之後應該要像這樣:

<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">" title="permanent link"><$BlogItemDateTime$></a></em>
<mainorarchivepage><blogitemcommentsenabled>

<a class="comment-link" href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">#comments">
<$BlogItemCommentCount$> comments</a>
</blogitemcommentsenabled>

<a href="http://www.blogger.com/app/post.pyra?blogID=10420665&postID=110706565050212831">');" target="_self">
<script type="text/javascript">postCountTB('<$BlogItemNumber$>'); </script>
</a>
</mainorarchivepage> <$BlogItemControl$>
</p>


然後大概得自己調整一下讓版面看起來一致。至於 Step 3 就自己決定要不要囉!

接下來當然是把 template 存檔,然後 trackback 就出現在 blog 上了。:)

對了,為什麼不用 haloscan 提供的自動安裝功能就 好了呢?這功能方便是方便,但會把 comment 也一起換掉,如果你的 blog 上已經有很多舊的 comments,便無法顯示出來了。就算沒這個問題,被換掉的 comment 變成一個外來頁面,介面操作上和視覺上也都不太合適。所以還是乖乖手動改 template,只用 trackback 功能就好囉!

(續)用 Blogger.com 的時候,怎樣可以知道有新的留言?

作者: zonble 發表時間:2005-01-29

雖然說 Blogger.com 沒有提供近期迴響列表功能,但是還是可以透過給個彎,達到相同的效果,簡單來說,只要把某一個在 Blogger.com 上的 blog 的所有的迴響留言,全部貼到另外一個在 Blogger.com 上的 blog 就好了。

Settings->Email->Mail-to-Blogger Address 這個選項的用途是,您可以設定某一個blogger.com 的信箱,當作是發表之用,只要往這個信箱寄信,就可以張貼成 blog。所以,用我們在前一篇文章中所說的說法,我們可以先把 blog A 的留言,先寄到你的信箱,然後這個信箱又設定了自動轉寄,把寄過來的留言,貼到 blog B 設定的信箱,然後貼到 blog B 上。如此一來,blog B 就是 blog A 的迴響留言列表了。

而用同樣的方法,您可以把 google news alert、其他有的沒有的電子報,都轉寄到某個 blog 上。如此一來,您就可以用 blogger.com ,當成是您的專屬新聞閱讀介面了(您可以參考看看「中文劇場新聞」,還有,如果是收HTML郵件的話,您應該會需要把Settings->Formatting-> Convert line breaks關掉)。

或是,您可以用bloglet,把別的blog的RSS轉成email之後,再透過 email 自動轉貼到你的 blogger.com blog,這樣,你也就有了一個可以自己設計版面的 RSS aggrerator 了。

用 Blogger.com 的時候,怎樣可以知道有新的留言?

作者: zonble 發表時間:

Blogger.com 並沒有提供像「近期留言列表」(Recent Comments)這樣的功能,您無法從首頁上,知道最近有人對您的文章發表感想。不過,沒有關係,您可以從Setting->Comments->Comment Notification Address這個選項中,設定成您的信箱,這樣只要有人發表留言的時候,就會發信通知您了。

而如果是許多人都在寫同一個blog的時候,您就會發現這個選項只能夠設定一個地址,而不能夠通知所有的作者。解決的方法也很簡單,您可以把收件地址設定成一個mailing list,或是,您可以設定一個專門用來收留言通知的信箱(例如去gmail申請一個),然後將這個信箱設定成收到信的時候,轉寄給所有的作者就可以了。

關於「引用 (blockquote)」這個語法

作者: barabbas 發表時間:2005-01-27

Blogger 本身的 HTML 編輯器支援「引用 (blockquote)」這個語法,因此幾乎每個預設模板裡都會寫。不過這東西畢竟是老外發明的,有個特性不太適用於中文。請到您的模板裡瀏覽一下,找找那裡有設定 blockquote 的 CSS。找到之後,看看裡面有沒有 font-style:italic 這一行,如果有的話,強烈建議您去掉它。為什麼呢?

因為中文字實在和「斜體」這個概念合不來啊!

您可以考慮用 font-weight:bold 來做粗體效果,用 font-family 換個字體,或用 color 指定其他顏色,都會比 font-style:italic 看起來舒服些。

修改 Blogger.com 模板的第一步

作者: zonble 發表時間:

Blogger.com 所提供的預設模板,都算相當簡單而且美觀,而老實說,想要一個自己的blog,其實用系統內建的模板就已經很夠用了。但是,不管怎麼樣,就台灣人的使用來說,有一些調整算是相當必須的。

通常來說,預設的模板的開頭,經常是這個樣子:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>

請修改成這個樣子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<$BlogMetaData$>
<title><$BlogPageTitle$></title>

就Blogger.com所定義的模板中xml:lang="en"這一段的意思,是使用將語言設定為英文的XHTML標準,雖然這樣也可以正確顯示繁體中文,但是就許多的瀏覽器來說,特別是使用了Gecko引擎的瀏覽器如Mozilla、Netscape及Firefox等,往往就會使用簡體中文字體,套用到繁體中文上,比較明顯的差別是在台灣我們習慣標點符號位在每一行的中央,而簡體中文的標點符號則是對準基線(baseline),在閱讀的時候會比較不習慣。而如果拿掉這一行的定義,標點符號就會放在中央了。

另外,就是要將<$BlogMetaData$>放在<title>的前面,那是因為我們需要將XHTML的文字編碼定義,放在文件的標題之前。這是因為我們通常在Blogger.com上使用UTF-8文字編碼,而在微軟的Internet Explorer瀏覽器中存在著一個bug,中文的IE會預設以Big5開啟網頁,然後一行一行讀取設定,而不是先去偵測文件中使用標籤定義好的編碼,然後再去以這種編碼方式開啟網頁。

這造成的結果是,如果在title中使用了UTF-8的中文(在單篇文章彙整,或是您設定了
中文的站台名稱,就會出現這種狀況),而編碼的定義放在title之後,那麼因為IE還是以Big5解讀title,然後往往就會因為找不到title的還原標籤(close tag),而讓IE以為在title後面的全部內容都是title的範圍,也就出現了IE開啟UTF-8網頁時,出現一片空白的狀況。

新格開張

作者: zonble 發表時間:

我又在blogger上面開了一個新的blog。我的blog還真多啊。

簡單來說,這個blog的用途,是一個blog on blogger,在於介紹怎樣將blogger.com所提供的服務,變得能夠更符合台灣使用者的需要。就目前來說,要架設一個blog網站有非常多的選 擇,在台灣已經有本土的、而且還不錯的blog hosting例如樂多blog等, 甚至連TVBS都開始提供了blog hositng的服務,而如果要自己架設的話,在台灣Movable Type以及WordPress等也都相當普及,而在台灣使用WordPress,我在其中也有份,但是就系統的簡單易用以及彈性上, blogger.com還是非常有趣的工具。

blogger.com可以讓每一個帳號可以同時有許多個blog,也可以讓許多人同時寫同一個blog,在不需要額外自行架設任何工具的狀況下,就可以同時參與許多不同主題的專屬blog。以我而言,我就同時參與了#osxchat blog以及錯誤特攻隊等。而雖然blogger.com提供的服務陽春了些,不支援近期留言列表、不支援文章分類,但是因為具備相當的彈性,所以有許多方法、繞過一些彎,還是可以使用這些功能—這些作法就是以後要慢慢說了。