這是0與1謎詭世界全部文章列表，歡迎訂閱我的部落格文章。
訂閱網址：http://feeds2.feedburner.com/lun01
依日期
依文章分類
如果也想做文章列表，請參考幫部落格做個網站目錄（文章列表）吧
2009年9月27日 星期日
2009年9月26日 星期六
Blogger的社群小工具---Twitter Gadget
2009.9.26晚上11:50更新，
之前使用這工具都好好的，但是今晚卻出現此小工具已毀損，建議移除的字樣，也不穩定，是發生了什麼事，不然簡單的設計我個人還滿喜歡的，目前小工具正在修復中。
Blogger後台的小工具，通常我們使用的就是基本的那幾個，其他部份很少利用，最近看到Known Issues for Blogger有介紹到這個Twitter Updates 2.2: FeedWitter小工具，單純文字型的簡單介面，覺得還不錯用。
進入後台，版面配置→網頁元素，新增小工具，然後在搜尋框上直接打上"twitter"，就會出現這個小工具，
填好設定的資料，再按下儲存即可完成，非常的簡單，出現的速度也還不錯，不會卡卡的。
目前使用上還可以，但是功能上，雖可設定高度，但似乎沒有用，我設高度100，要出現5則文章，但是沒有出現捲軸，還是全部顯現的高度，另外建議Follow me的圖案可以不用勾選，因為很佔位置，看個人喜好。
原本裝的是以下這個，比較漂亮，也可以自己調整顏色，但總覺得載入網頁的壓力重了些，如果喜歡這種介面的可以參考，裝個漂亮的Twitter Widget在邊欄碎碎念一文說明。
Blogger後台有很多小工具，可以試著自己挖寶看看，不過以前試用過對IE的支援度不是很好，現在似乎有漸漸改善。
昨天幫自己的另一個網站---東京封印，改版，因為文章屬於旅遊性質的文章，圖片也很多，所以一直很想做一個類似雜誌型的網頁，還有可以放上728*90的長條形廣告，目前已大致完成，算是給自己一個交代吧。
如果喜歡日本旅遊的朋友，歡迎訂閱我的網站。
訂閱網址---Rss Feed
延伸閱讀：
裝個漂亮的Twitter Widget在邊欄碎碎念
將Twitter放到部落格的各種方式
2009年9月19日 星期六
秀出你的大頭來‧Blooger新增留言者頭像圖片功能
2009.10.20通知，目前這個功能無法正常顯示，正在尋找答案中。
Google Blogger為了慶祝10周年，真是每天都帶給我們驚喜，不斷有新功能推出，這次又推出了留言者頭像的展示功能(Avatars on comments)，Show your face! ，露臉功能，雖不像WordPress有提供Gravatar的工具外掛那樣的好用，但是針對Google Blogger社群裡的使用者而言，也是一個不錯展示自己的方式，前提是你要選一個讓人有印象的大頭圖像Avatars。
如果要讓你的大頭出現在留言意見裡，首先你的後台設定→意見→要選擇，"在評論上顯示簡介圖片才能成功。
如果是利用官方的模板，而且沒有裝什麼Hacks，可能有些人已經發現你的意見區自然的已經出現留言者大頭圖片，但我想很多人都不是用官方的版面，而已經是歷經滄桑的版面了，所以這時就要自己加上一些語法來修正，才能正確的出現大頭圖像的效果。
如何做呢?一樣記得先備份原始的模板
進入後台→版面配置→修改HTML→勾選"展開小裝置範本"，
第一步驟，
首先找到以下的語法，
<dl id='comments-block'>換成以下語法
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>第二步驟，
找到
<a expr:name='data:comment.anchorName'/>在上方新增以下語法
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>按下儲存即可。
這樣一來就可以發現你的大頭圖片出現在你的留言前面了，不過要出現大頭是要在你登入你的帳號的情形下才會出現，如果你是利用匿名或是留下姓名及網址等其他方式，這個留言者圖像就不會發揮功用，而是一片空白的情形，我想Google官方未來應該還是會再修正吧，只是不知要等到何時就是了。
如果你覺得匿名或是用其他方式留言者出現一片空白，你可以在
]]></b:skin>之前，增加一個css定義如下，
/* Avatar */
.avatar-image-container img {
background:url('http://sites.google.com/site/lunfiles/box/qavat.gif');
width:35px;
height:35px;
}其中background的圖片網址，你可以置換成你自己喜歡的任何圖片皆可，就會出現像以下這樣的大頭圖片，這是我在沒有登入的情況下留言。
2009.9.21
大頭圖片修改為
另外有的人的模板可能找不到
<a expr:name='data:comment.anchorName'/>像我的另一個網站就是，如果還想利用，這時第二步驟就變成找到
<b:if cond='data:comment.authorUrl'>然後在上方新增
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
按下儲存即可。
另外官方有提到可以在留言區換大頭圖片的功能，我一直測試都沒法出現那個選項，官方是說留言時先不要按下"發表你的留言"而是按下"預覽"，就會有個讓你上傳大頭圖片的功能，再上傳圖片即可，
其實部落格寫了2年多，真的覺得一開始部落格的名稱、作者名字與大頭像的選擇非常的重要，常常在網路上閒逛時看到熟悉的頭像就會按下去，或是Google搜尋某人的文章，也會記得該部落格的名稱，只要打兩個或三個字就會出現該部落格的搜尋提示，所以想認真經營部落格的朋友，選個好記的名字是很重要的，我是這樣認為的。
另外如果你的大頭圖案或是作者名稱曾經更換過的，以前以舊圖像或是舊名字留言的部份，圖像也是無法出現，目前綸太郎是找不到方式解決，Blogger不像Plurk還有歷史圖像的存在吧，這應該慶幸嗎?哈哈，如果有解決辦法的朋友，歡迎留言貢獻。
2009.9.20更新，
如果你試驗上述方法都不成功，最後只有一個終極辦法，就是
按下"將迷你組件範本回復為預設值"就可以了，什麼都可以不用改，按此方式要謹慎利用，一定要先備份，因為會影響你之前裝的Hacks工具，牽一髮動全身，我個人是不建議使用，所以一直沒有寫出來，只是我想還是有人想知道，自己謹慎考慮使用就是了。
如何使得版主回覆和其他人的留言作區隔呢，可參考加強blogger作者留言和一般留言的區分一文說明。
參考來源：
Blogger bring us comment avatars! Awesome!
Profile Avatars for Blogger Comments - Updated
2009年9月15日 星期二
Blogger Templates│2009年最新模板資源
Blogger10周年紀念，推出了許多新鮮功能，個人覺得對新手而言，最重大的就是釋出了繼續閱讀(Read More)和圖片上傳不限於5張且能指定插入位置的功能，是相當實用的功能。
既然官方釋出了這麼多功能，我想搬來Google Blogger是很不錯的選擇，因為Blogger官方改版甚多，很多以前設計的模板有些已經不適用，所以綸太郎再跟大家分享一些比較新的模板資源網站。
● Templates Novo Blogger
這應該是個歐洲人設計的網站，語言應該是西班牙文，在BTemplats也可看到他的作品，不過這裡會有最新的設計模版，也有分享很多設計的小技巧。
● Deluxe Templates
這裡的模板大多都是作者精挑細選，屬於進階型的模板。
● Free Blogger Template Cahaya Biru
這裡的模板算是高階型的，為什麼推薦這個網站，可能看起來有點雜亂的網站，但是它提供的模板有一些是其他網站看不到的，可以挖寶。
● Falcon Hive
網站設計者是位華人，所以用中文也可溝通，他設計的模板主要是以WordPress Themes為基礎，轉換成Blogger使用的模板，所以相對性功能會複雜些，安裝時要參考作者所寫的注意事項，才能安裝成功。
● ipietoon
這位作者設計的模板比較趨向女性化及可愛型的，
他自己的網站也相當可愛，設計了許多Icon及表情符號，不過不是以英文寫作，閱讀上會有點困難。
而他自己成立的bietemplates模板資源網站也不錯，用表列式呈現，很清楚。
● BloggerStyles
這個網站會以金牌、銀牌及銅牌認證來判定模版設計的優劣，以支援各種瀏覽器的程度高低而定，其實我自己試用過，可做為參考，不必太認真。
● BTemplates
最後這個大家應該很熟悉了，沒有時間一個一個資源慢慢挖寶，直接就進入這個網站，更新速度蠻快的，而且分類、標籤做得很詳細，支援何種瀏覽器也有註明。
其他資源還有，
‧template4all.com
‧ Blogger Templates Free
‧Free Blogger Template
‧MagzNetwork Blog Design雜誌型的模板
另外新手建議先選擇以下介紹的模板較快入門，
Blogger Templates 模板資源，是在2007年6月寫的文章。
綸太郎在2007年6月寫了這篇為何在Blogger架設自己的部落格提到的眾多缺點，
缺點：
1、沒有最新文章、最新回應，這應該是最為人詬病的地方
2、沒有繼續閱讀的功能
3、沒有計數器、月曆、留言版，和網友的互動性設計幾乎是完全沒有
4、官方版型樣式只有兩欄的，而且版型少得可憐
5、沒有入口網站的首頁，發文後只能自己看看，或是貼到書籤網站去自推，當然了，有了一定的名氣，就會被大家bookmark
6、聽說被大陸封了IP，大陸同胞無法直接連上，需透過轉址服務(不過在我板上留言的，確有幾個大陸同胞，很感恩，辛苦你們了。)
經過兩年Blogger至少已解決前兩項，其他的功能現在申請也非常方便，再來就是挑一個自己喜歡的模版，如果你想在部落格寫作，推薦Google出品的Blogger是個可以安心寫作的好地方。
延伸閱讀：
Blogger文章編輯區新版模式正式啟用
Blogger Templates 模板資源(2007.6寫的)
推薦好書：
網頁設計排困解難 120 問答熱線(附1光碟)
2009年9月9日 星期三
Internet Explorer出現黃色驚嘆號的抓錯方式
雖然很多人推廣使用Firefox瀏覽器，但是綸太郎的讀者超過5成還是使用IE在瀏覽我的文章，所以IE6目前還是存在我主要使用的電腦裡，再加上在IE裡打文章比較不會有多餘的程式碼，而且套用模版抓錯時很好用，做為一個教學分享取向的網站，我想IE6對我而言，還是有存在的必要性。
為什麼說套用模版可以抓錯呢，因為我發現瀏覽網頁時，IE6的狀態列會出現黃色三角形的驚嘆號，提醒我們網頁出現了什麼問題，讓我們可以及時修正，而Firefox對語法的容忍及支援度較IE大，而且很多語法在IE是不支援的，所以這就是為什麼現在Firefox或是Google的Chrome普及率漸漸升高的原因吧，包含我自己也是用FF在看網頁，那是因為IE6已經落伍了，跟不上軟體及網頁技術更新的速度吧，但是我個人還是會繼續用它，如果要升級的話，我想會直接升到IE8吧。
如何抓錯呢?
其實這是網友DirtyMan留言提到的問題，狀態列上出現黃色驚嘆號，並將相關的文字訊息告訴我，其實很簡單，但前提是要你的電腦有裝Firefox瀏覽器，兩者並用就可抓到問題在哪裡，而綸太郎通常只能知道問題出在哪，將那段語法刪除，因為問題大多不是出現在簡單的文字錯誤，而是整個語法在IE底下不支援，而對於較深入的程式碼，我也無能為力，這是要告訴大家的，另外也有不知所以的錯誤，所以看看前後相關的程式碼，自己再判斷看看是否是影響整個語法結構的關係。
通常狀態列出現驚嘆號時，會出現"已完成，但是網頁發生錯誤"的訊息，我們在狀態列點兩下，就會跳出訊息視窗，這時按下"顯示詳細資料"，就可以知道瀏覽器是跑到那一段語法出現錯誤，
以這個圖為例，他告訴你在610 行，第19個字元時發生錯誤，這就是答案了，但是我們怎樣去找出這第610行了，這是就要利用到Firefox瀏覽器了，我們打開Firefox瀏覽器，將此頁的網址key上，出現網站後，按下上方工具列的檢視→頁面原始碼，這裡就可以看到這個網站的原始程式碼了，這時在原始碼的頁面工具列上，找到編輯→移至行號，
這時會跳出視窗，你就輸入610，按下確定，
游標就會跳到該行了，
這時我們可以看到狀態列有顯示這是第幾行，就可找到第610行第19個字元了。
這就是大概找到錯誤點的流程順序，接下來就是解決方式了，由於綸太郎對程式設計並不懂，所以只能將有問題的語法刪除，
以這個範例來說，他出現的是在這一段
<div id='navbarright'>
<form action='http://revolutionzc.blogspot.com/search' id='searchform' method='get'>
<input id='s' name='s' onblur='if (this.value == \'\') {this.value = \'Buscar en este blog...\';}' onfocus='if (this.value == \'Buscar en este blog...\') {this.value = \'\';}' type='text' value='Buscar en este blog...'/>
<input id='sbutt' type='submit' value='GO'/></form>
</div>為了保險起見，我們不能只刪除<form action...>到</form>這部份，這個語法可以看出是導引列右方(navbarright)的搜尋列位置語法，其實你可以用你自己的搜尋列的Form語法置換上去，或是將整塊區域語法都刪除，就是從<div id='navbarright'>到</div>
就能解決這個問題了。
以上是大致的除錯方式，每個模版發生的狀況不盡相同，但是至少可以知道原因在哪裡，或是哪段語法有錯誤，我們再進行修正補救。
另外有些模板刪除了第一個問題，你再次瀏覽還是會出現驚嘆號，並不是沒有解決該問題，而是IE的瀏覽器在跑網頁的時候，會顯示最先遇到的錯誤，錯誤解決後再跑網頁，才會跑到第二個錯誤的地方，或許一個模版有好多錯誤，其實這種情形，我都會放棄該模版，另外找尋適合自己的模板，除非你想要挑戰一下，覺得除錯很有趣的話，也是可以慢慢的抓出錯誤，不過自己改了那麼多的模板，真的覺得改模版是件很辛苦的事，已經漸漸減少改模版的遊戲了。
2009年9月4日 星期五
Blogger文章編輯區新版模式正式啟用
今天發現Blogger後台有一些小改變，這改變不知是何時開始的，就是文章編輯區增加了許多對於文字及Html設定的改變，其實這在Blogger in Draft時就有出現，不過當時並沒有試用，既然已經正式啟用，就來用用看吧，有些功能還真的不錯用，不過要適應還是要慢慢來。
如何變更為新版的文章編輯畫面呢?
進入後台，設定→基本，最下方有一區顯示"一般設定"，選擇"新版文章編輯器"，然後按下儲存設定，就完成了，記得這個套用是所有你以這個帳號申請的部落格，不是只針對單一的網誌歐。
試用過後覺得有些心得跟大家分享，
先來說說缺點吧，
● 修改Html區，少了圖片載入的功能，這是我寫文章的主要方式，少了這選項對我影響蠻大的。
● 上傳圖片時沒有大中小選項，一律先以320px大小(中型)的格式上傳，之後可再修改。
● 多了許多不必要的程式碼，div....，這個我最討厭。
● 少了影片視訊輸入的部份，可能是因為Google Video終止服務，還有避免侵權的事情吧。
優點，
● 多了向前、向後的復原及回復的功能方向鍵
● 增加文字背景顏色的設定，這對標記重要文字很有用
● 多了文字加上刪除線功能
● 可自由拖曳加大編輯區
無所謂優缺點：
● 跳出視窗的預覽模式
● 字型從8個變成7個，少了Lucida Grande、Webdings，多了Helvetica
● 多了編輯Html設定，這個應該對從其他軟體轉貼到blogger後台的人有幫助，而撰寫設定，則對程式碼的轉換有幫助，不用把<及>用程式碼代替了。
總體而言，我覺得對圖片載入的影響最大，不受限5張而且能在想要的地方插入，因為它的原理是將圖片先放到一個暫存區，跟WordPress的原理很相似，點選插入他才會真正產生在文章裡，還有不用再修改圖片的長與寬了，直接將語法改成s800或是s1600，就能顯示最大的圖，不過我想也會影響文章載入的速度吧。
這篇文章就是使用新的文章邊輯器寫的，多花了很多時間，自己還蠻喜歡文字背景的功能。
後記：這個項目符號在IE6根本無法正常顯示，都擠在一起了，真是沒用的東西呢。
2009.9.26更新
目前已推出新版編輯器已加入"繼續閱讀--(Read More)"的功能，新進入Blogger的朋友，建議可以直接使用，就不用利用Hacks了，詳情請見
英文：Creating 'After the jump' summaries
中文：[Let's JUMP!] 眾所期待，Blogger開放繼續閱讀功能
2009年9月3日 星期四
將首頁、較新及較舊文章文字以圖片代替
這個算是雞肋的功能吧，有些人或許很久以前就已經有用過了，不過綸太郎還是將它分享出來，有時也想調整一下版面，但又不想有太大變更，就微調一下吧，用些小小圖片增添趣味吧。
將回到首頁(blog-pager)、較舊的文章(blog-pager-older-link )及較新的文章(blog-pager-newer-link )以圖片代替，圖片可以自行尋找，選擇你覺得有趣、漂亮或是適合你版面的圖樣都可，綸太郎是利用Iconfinder這個網站來找圖的，
譬如首頁圖案，輸入"Home"，而向左圖案，輸入"Left"，就可以找到你要的圖案，向右的圖，就將向左的圖利用影像編輯軟圖將圖作"水平旋轉"，就能得到向右的圖片了。
如何置換呢?一樣記得先備份原始的模板
進入後台→版面配置→修改HTML→勾選"展開小裝置範本"，然候找到以下的語法，將它置換即可，
較新的文章
<data:newerPageTitle/>以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>置換
較舊的文章
<data:olderPageTitle/>以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>置換
首頁，有兩個地方都要置換
<data:homeMsg/>以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>置換
以上這樣修改html的語法後，就能將這些文字連結以圖片替代了。
如果發現你的圖片區高度太低，或是還是想用原本的文字連結，而想修改展示文字的顏色大小，可以找到以下Css部分的，
#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center; }修改或是新增裡面的語法，讓版面更適合你的需求。
另外如果想保留原有的文字，而想再加上圖片，也可以不用如同上方的語法用置換的方式，而是將圖片語法直接加上語法的前或後，這都是可以自行運用的方式。
參考來源：
Replace Home and Posts Links by images in Blogger--Blog Godown
訂閱：
文章 (Atom)