2009年2月28日 星期六

今天(228)是FeedBurner合併帳戶的最後一天


今天是FeedBurner合併Google Account服務的最後一天,從2009年3月1日起,所有的服務都轉移至Google,如果還沒進行帳號合併的朋友,可以儘早合併。

詳細情形,可以參考這篇文章,More details on moving to a Google Account
節錄一部份

‧ On February 28th, if you have not moved your feeds to a Google Account, the traffic to your feeds will not be cut off or terminated, but you will not be able to view or manage your feeds until you have moved to a Google Account, unless you use MyBrand. Technically, this means that all traffic will now be served out of our Google data centers, and there will still be a way to move your account that will be in place indefinitely.

‧ If you used MyBrand at www.feedburner.com, you absolutely must move to a Google account and update your DNS CNAME records by March 16, 2009, or else your MyBrand URLs will return a 404 error. If you use MyBrand and have not moved, you should have already received an email from us with detailed instructions. If, for some reason, you have changed the email address associated with your FeedBurner account, you will receive another message once you have finished the move process to the email address associated with your Google Account.

如果在2月28日還沒有進行合併的動作,雖然一切資訊仍保留,但是你無法利用FeedBurner原始的的帳號去察看訂閱的情形,除非你有MyBrand帳號(這是Feedburner的高階服務),但是設定資料仍然要指向Google的帳號(map a domain),不然3月16日起你的資料就會全部消失,或是變成404頁面,這是大概的意思吧。

因為FeedBurner已成為Google版圖的一部份,以後訂閱都是以AdSense for Feeds取代Feedburner的服務,只是很多人並沒有申請AdSense的服務,這樣的命名真的有點奇怪,不過後台還是顯示原始的FeedBurner的圖樣。

另外我在想部落格觀察裡的FeedBurner可能也要修正,他一直顯示的舊的FeedBurner的統計數字。

今天是最後一天,明天以後再移轉的朋友,不知原先帳號裡的流量及統計會如何,大家能夠早點合併就早點合併吧,跟FeedBurner說聲再見啦,讓Google打理一切事摟。

2009年2月26日 星期四

追蹤者(Followers)功能大躍進


昨天寫完追蹤者(Followers)銳減的文章,今天Google就將這個進化版的追蹤者小工具完成了,真的有苦民所苦的效率,感覺這個小工具可以和Google Friend Connect結合,也可以和其他社交網路工具連結,如Twitter、OrkutPlaxo都可連成一氣,創造屬於你自己的網絡世界。
(Orkut是Google旗下的交友網站,而Plaxo是一款網路行事曆聯絡簿工具。)

不過這個工具,和GFC感覺很像雙胞胎就是了。


不過還是要先解決Followers減少的問題,之前有網友留言有出現匿名的選項,我的部落格是今天才看到這個選項,如何恢復呢?其實這要有追蹤你的格主都去做這個變更,你的人數才會漸漸回來,而我自己可以做的就是將這些因Google改版變成匿名的追蹤,再改回公開追蹤,這樣對方部落格上的追蹤數字就會漸漸回復了。

如何進行呢?
一樣登入後台,在資訊主頁裡最下方的閱讀清單,有個「我正在追蹤的網誌」,按下最下方的管理


就會出現你追蹤的名單,你會發現有些部落格變成匿名追蹤,只要把它改成公開即可。


按下你要修改的部落格最右方的設定,會跳出一個視窗,將"你正在追蹤 匿名地",將匿名地的連結按下,又出現一個更小的視窗,追蹤選項,點選公開追蹤,按下儲存,再回到剛跳出的視窗上,按下完成即可,就可以變更為公開追蹤,這樣對方的網誌上就會多了你一個追蹤者的數字了。


這裡面有進階的選項,讓你決定是否擴大你的網路圈,先前已經公開追蹤網誌的選項,Google一律預設為"和Google Friend Connect的社交網路好友連結" ,但是「將我的活動發佈到其他我已加入的網站」這部分沒有勾選,你可以修改變更你想要的方式,再來就是它可以和其他網路社交工具聯結,彈出的視窗裡有個+新增/移除的選項,按下就可視你的需求來新增Twitter、Orkut及Plaxo等工具或是移除,


當然你要將Google Friend Connect工具移除,或是不想和Followers工具做連結都可以,就看你自己的選擇,而最下方的較少選項,如果你追蹤的網誌很多,不想套用有關GFC的選項,就按這項,只有公開/匿名兩種選擇而已,其他都一致套用官方預設的即可。


如果你想刪除追蹤網誌,只要按下右手邊的您已加入的網站,按下停止追蹤即可。


最下方還有管理好友的部份,如果你的GFC帳號和Blogger帳號是一樣的,就會出現內容讓你修改。

另外有一個隱私權的選項就是在My Profile的選項裡,在後台資訊主頁左手邊有個修改您的簡介,按下後,第五行有個顯示我追蹤的網站,如果勾選的話,你的Blogger個人資料,就會出現你追蹤的網誌資料,這是可以自己調整是否顯示的部份。


這是沒有顯示的畫面


這是有顯示追蹤者的畫面



其實這個東西和GFC很類似,但是這個顯示追蹤者的Widget卻是專屬Google Blogger的使用者的,讓其他沒有Google帳號的朋友,或是沒有成立部落格的朋友,透過Open id或是Yahoo帳號來Followers追蹤你的網誌,

但我想不通的是,

這樣一來只是一個展示的場所,分享你的網絡世界,對格主有利,但是對於不是以Google Blogger加入追蹤的人而言,因為他沒有像我們後台可以看到你追蹤的網誌最新文章可以看,這樣的追蹤有什麼意義呢?不是跟GFC是一樣的意思嗎?

不過後台是有項"將我的活動發佈到其他我已加入的網站",透過這個選項,如果有人點選你的大頭還是可以看到你的最新動態的,只是覺得GFC和Followers都是Google推出的工具,但是真的我只要一個就好了,我要大頭、要聯播功能、要留言板,要有其他帳號的人都可以加我,不要弄得那麼複雜,我只有追蹤30幾個就改得頭昏腦漲,如果更多人我真的很想把他刪除,回到單純的Google Reader、MyBloglog及留言版功能就好了。

如果大家有更好利用的方法,可以留言討論,對於這兩個我真的很混淆,尤其我兩個帳號是不同的。

晚上10:55更新
剛才在Blogger Buzz看到這篇文章---Friend Connect: Grow Your Blog's Community ,他有提到會自動整合和GFC的服務,所以你不需要做任何事
Blogs that are using the Following feature have automatically been migrated to Friend Connect, so you don't need to do a thing. And be sure to stay tuned - over the next several months, there are a number of additional features coming to Blogger as a result of today's Friend Connect integration.
我在想是否是因為我使用兩個不同帳號才需要修正匿名/公開的選項,如果是同一個帳戶就不會有這個修正的動作了,如果有人是利用同樣帳戶的,還是要修改匿名,可以告訴我嗎?不然Google寫這是寫心酸的嗎,還是要改啊,有兩百多個追蹤者的人甚至更多的人怎麼辦,改一次就Reload畫面一次,很辛苦呢,你有追蹤很多人的格主,或許再等等看,說不定幾天後,就又會自動改成公開吧,我是這樣希望的。

另外如果同時加入我的Followers與GFC帳號的,會顯示兩個我的部落格名稱,這樣好嗎?可是我不想合併帳號,或許會把GFC砍掉的,再看看吧。

2009年2月25日 星期三

關於Blogger最近的錯誤--followers減少及留言驗證錯誤

MyEm0.Com

最近大當家Google Blogger說為了部落格更好,更為了萬千blogger的幸福著想MyEm0.Com,最近作了些後台修正與調整的作業, 綸太郎因為發現追蹤者的人數銳減,而且留言驗證碼的功能無法執行,在Blogger Twitter終於找到了原因,但是目前官方還是在處理中,所以說只能等待Google修正,還給我ㄧ些虛榮的數字吧。

首先是Followers人數減少的問題,我的數字好像是從116個人減少到46個人MyEm0.Com, 砍成一半不到,留給我4折的結果,根據以下這篇全部英文的說明,官方表示他們在進行Google Friend Connect和Followers的重整與合併,為了隱私權的部份,所以目前在規劃能讓部落格能見度提高,並讓部落格和社群能夠更緊密結合的方式,重點 是followers的人數沒有減少,只是暫時隱藏,而我自己去看我有追蹤的部落格,確實已經沒有在追蹤者的名單上,但我想Google說會處理,就靜觀 其變了。

We are in the process of integrating with Google Friend Connect, which may temporarily affect the Following feature for some users. Specifically, users who already use Following and Friend Connect may notice missing blogs in their profile, as well as a decrease in the number of public Followers on their blogs.

This is because we have set these users to "anonymous" to avoid linking the profiles of Blogger and Friend Connect users without their permission. They are still following privately and will able to make themselves public again.

After the official launch of the Friend Connect integration, we will communicate with the affected users and instruct them how to reset their relationship to public. To reiterate: the number of Followers has not changed, and we believe that the launch will improve the visibility of your blog and community. We will post more details on Blogger Buzz as the launch approaches.

另外就是留言驗證碼,無法執行的部份,本來按下驗證碼是處在loading的情況下,今天已經有改進,在Firefox底下打進驗證碼是可以留言成功的,但是在IE6會出現錯誤,留言是失敗的,所以目前是暫時將驗證碼的功能拿掉,等待Google修正了。

我在想Google是不是請了新的員工,為了力求表現,所以大刀闊斧的努力打拼,真希望不是新官上任三把火,只留下一堆問題留給部落客自己尋求解決,就像模版上載的問題,雖說有官方模版可以用,但大家還是喜歡漂亮多功能的模板,至於社群與追蹤者的功能,說實在的真的有重複的部份,但是followers中類似 Google Reader輪撥的功能卻是很好利用的,希望這一次修正能快點完成,讓我們安心順利的寫文章吧。

2009.2.26更新
Follow的功能,Google已修正,請見
追蹤者(Followers)功能大躍進一文


MyEm0.Com

參考資料Known Issues for Blogger:
有關followers減少的說明
Google有關驗證碼錯誤的說明
圖片來源:myem0.ocm

2009年2月22日 星期日

利用大頭貼│表情符號,讓你的部落格文章更具吸引力


寫部落格有時是件寂寞的事,尤其如果一天遊客寥寥,沒有人跟你互動,看著自己的文章也覺得提不起勁時,不妨利用表情符號讓你的部落格活潑些,有朝氣些,讓可愛爆笑的圖片點綴你的部落格,自己也會覺得開心。

2009年2月20日 星期五

如何利用捲軸讓邊欄(Sidebar)元件縮短


是否曾經有這種感覺,自己的部落格的邊欄元件太多,造成版面太長,每次滑鼠總要推很多次才能到底,怎麼解決呢?

我常看許多人的部落格,邊欄元件拖得好長,尤其是書籤區或是RSS聯播,常常是長長的一大串,對我這種喜歡版面簡潔又沒耐心的人,閱讀起來真的有點負擔,最近因為改版的緣故,頁面變成兩欄式的,勢必有些Widget元件要拿掉或是縮短,才能達到自己的要求。

以前曾經看過Abin's Tech Note: 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling),這篇文章提到可以展開和摺疊邊欄元件,這是一個調整自己版面好用工具,但我想利用別種方式,提供以下方法,喜歡用的人再嘗試,至於初學者不懂CSS語法的朋友,建議比較熟悉CSS語法後,再來利用,免得毀了你的部落格。

其實這個方法很簡單,是利用Scrollbar捲頁的控制原理製作,大家可能會想,只要設定它的高度,然後overflow設成auto就能執行了,Yes,You Got it!原先我也是這樣想的,結果出來的是這樣的東西,如下圖,


整個元件都包含在Scrolling裡面,所以元件的標題(我追蹤的網誌),在滑鼠往下捲動時他就會消失不見


一直想不到方法解決,增加h2的定義也沒有用,最近看到別人的部落格上有這個東西,就研究一下他的原始碼,終於解決了標題跟著捲軸跑的問題。

由於Blogger邊欄的元件,產生方式不太一樣,例如追蹤的網誌,或是清單,這些元素,是在小工具裡是直接產生的,而沒有程式碼可修改,而用新增Html/JavaScript元件,則是直接加入程式碼產生,所以修改方式不太一樣。

首先這個元件須先存在才能修改,記得一樣要備份你的原始模板

後台→版面配置→修改HTML,展開小裝置範本

1‧在CSS區放入以下程式碼,這是捲動區的定義,記得一定要用scrolling2或是3.4.5..,不可以用scrolling,因為這個scrolling已有內部定義,不能使用的。
.scrolling2 {
overflow: auto; height: 100px; width: 100%;
background-color:#fff; border:0px solid #777;
margin-bottom: 20px; padding:0px; font-size: 12px;
color: #999; text-align: left;
}


高度height: 100px,可以自己調整,我是調整250px,讓整個元件趨近正方形,當然相關的設定,如顏色或是大小,都可自行調整。

2‧找到這個元件的位置,譬如我的元件是「我追蹤的網誌」,按下Ctrl+F,出現搜尋框,然後貼上妳要找的文字--我追蹤的網誌,就可以找到這個元件的位置,
<b:widget id='BlogList2' locked='false' title='我追蹤的網誌' type='BlogList'>

然後往下找,會看到
<div class='widget-content'>
這就是這個元件的內容,在上面加一行語法
<div class='scrolling2'>
當然也要有相對應的語法做結束,通常是在下一個元件的上面,譬如我的是統計園地,


找到</b:includable>
在這個語法上面加上
</div>
按下儲存即可,回到部落格上你就會看見你的元件出現捲軸。

另外有種widget是新增Html/JavaScript小工具產生的,就不用像上面這樣改,只要在修改Html裡加入scrolling2的定義,譬如我現在用的最新回應的Hacks,然後在小工具裡的Html/JavaScript程式碼裡,最前面加上<div class='scrolling2'>最後面加上</div>把程式碼包起來即可,按下儲存就可以了,當然你要照上面這樣修改也是可以的。

在未修正前,因為不想讓元件佔版面太長,所以只顯示最新5則留言,


修正後,可以用捲動軸控制,所以最新回應設定顯示10則,想看的人再利用滑鼠移動即可。


所以可以視你的版面設計和編排來利用Scrollbar這個功能,讓版面更簡潔與美觀,也讓讀者不會有頁面太長的負擔。

2009.11.25修正
將div id='scrolling2'改為div class='scrolling2'才是較正確的用法。

2009年2月19日 星期四

好書推薦│家庭網路架好通


這本家庭網路架好通的電腦書是高登工作室舉辦踩踩樂活動獲得的,還有高登本人的簽名歐,請見恭喜發財!發紅包囉!一文,其實這本書我有去書局找過,只是書都用膠膜包著,無法窺得究竟,剛好高登有舉辦送書的活動,就碰碰運氣,看看是否有機會可以獲得,真的很幸運的,踩到30萬01次的幸運號碼,就這樣擁有了這本書。
書名:家庭網路架好通:區域/無線/寬頻連接大活用
作者:PCuSER研究室,包括高登Indeepnight兩大高手
出版社:PCuSER電腦人文化
出版日期:2009年01月06日

這本書對於想要在家裡架設一個小型網路的朋友非常實用,只要有兩台電腦,就可實現區域網路的架構,而現在大多數家庭電腦通常不只一台,像我們家就有三台電腦、一台Notebook,雖然在辦公室都會利用網路上的芳鄰來分享或是傳輸別人電腦上的資料,或是利用共享印表機來列印資料,但是這種區域網路的概念在家裡都沒法運用,看了這本書才了解如何在不同電腦間共用資料夾,如何共享資源,雖然還在慢慢學習中,但是為我打開另一扇方便之門,不用拿著隨身碟或是光碟片穿梭在各房間中的電腦,做人力傳輸的動作。

書裡面提出一個名詞---動物機,我從來沒有聽過,這是介紹如何自己組一台P2P下載專用的電腦,因為P2P的軟體,例如eMule騾子Azureus藍箭毒蛙Bitspirit比特精靈小恐龍,都有動物標誌來代表,所以戲稱這種專門用來下載檔案的電腦就是動物機,真的是很有趣又新鮮的名詞。

而在博客來網站的介紹,節錄如下:
介紹網路使用上一般人可能遇到的各種連線問題上的原因和排除法。
一、3C 設備也能透過家庭網路無線上網
二、安裝分享器,讓多台電腦同時上網
三、加裝無線 AP,不用佈線就能共用 ADSL
四、電線也能變成網路線,加裝電力線橋接器
五、讓無線與有線互通,PC 與 Notebook共享資源
六、共用印表機、行動硬碟
七、連接 NAS 網路硬碟,打造影音資料庫
八、解決網路連不上的問題
九、家庭區域網路設定方式系統詳解

書裡面有介紹一些網路上的免費軟體,例如GeeXboX,能讓你的電腦成為家庭影音中心或是利用舊電腦自己架設免費NAS伺服器,都是很吸引我閱讀的章節,讓我的電腦不僅僅是處理文書、上網寫寫部落格,而能利用現有的網路設備,進行更多樣化的網路活動,就像書裡所說的,

用深入淺出的教學步驟打通你家網路的任督二脈

我想這本書是做得到的,這是我看了這本書之後,真的覺得寫得很不錯,向大家推薦,而兩位作者的部落格文章也很優質,也是我常去挖寶的地方,大家可以多去吸取網路資訊方面的知識。

參考資料及書籍封面圖片來源:
博客來網路書店(博客來AP策略聯盟提供)

更換新模板時發生bX-sftlmn│bX-9281o1o│bX-bliced的錯誤訊息



如果最近想更新模版的人如果不急著用,先等一陣子,或是先建立一個測試用的,可以執行再去更新套用,因為最近Google Blogger的模板格式好像有變動,造成很多人無法套用新模版。

昨天有網友問到關於上載模板時發生了錯誤訊息,在嘗試上載新的Blogger templates常發生的錯誤裡頭提到解決之道,以及將瀏覽器的cookie清除,斷線後再登入,一樣無法解決問題,而且新建立的部落格也無法套用網路上提供的templates。

經過我實際測試,真的連新建立一個新的部落格都無法套用,只能套用官方提供的模板,找到了Google網上論壇---Blogger Help Group這篇文章,發現這是最近這幾天發生的事情,很多人都發生一樣的錯誤,照道理來說,新建立的部落格什麼網頁元素都沒有套用,而且是Google官方的模板,應該都還沒有更動到什麼元素,怎麼可能不能套用呢?以最多人使用的羊男的Blogger Template BlackCoffee,我建立一個新的網誌,在沒有更動任何元素,也沒有新文章的情況下套用,他要我刪除以下三個元素,然後就出現錯誤訊息,所以這一定是Google內部搞的鬼,不然以前新部落格套用都沒有問題。


所以我的結論就是使用最新釋出的模板,以前舊的模板先暫時不要使用,除非是官方提出的,如果碰到這種情形,出現的錯誤訊息如bX-sftlmn、bX-9281o1o及bX-bliced、bx-39cc9q、bX-y6cz0v,其實還有好多個,模板資源建議可以參考這個網站Blogger Templates,因為他都有標示出釋出的日期,而且更新速度很快。


我的作法是利用以下這兩個最新釋出的雜誌型模版為更新基礎,可以套用後,再去上載其他最新釋出的模板應該就可以了。
Revolution Church Template for Blogger Bloganol.com
[FREE&VIP] Revolution Lifestyle Blogger Template

如果還是不行,可能要先將網頁元素全部砍掉,cookie刪除,重新登入後再執行看看,記得先前的網頁元素如有需要先備份。

有一個人則在論壇上提出這個模版資源網站,
Deluxe Templates - Professional Blogger Templates for Free
他說他都測試過都可利用,但我想廣告成分居多,我想最近有再更新模版的人可能都會遇到這個問題,大家可以參考看看。

如果套用不成功,建議多試幾個,因為這是Google整個模版設計的問題,或許他希望大家都用官方的模板,你套用網路上提供的模板資源出現問題,他要不要幫你解決呢???我想這就是Google要面對的問題,因為說真格的,官方釋出的模板式是沒有問題的,靜觀其變了,或許過兩天一切都正常了。

如果有更好的解決辦法,也歡迎留言討論。

2009.2.22更新
Xavier也提出一個修正的方法,請見
最新blogger template的bx-errror解決辦法
對於很多人使用的羊男三欄式模板是有效的,應該也適用大部分的模板,大家可以試看看。

2009年2月17日 星期二

一分鐘讓你的部落格也有數字分頁效果


2011.3.18更新
因為後來Blogger官方推出自動分頁機制,以下的方法已不太適用,同常要用官方的繼續閱讀,且圖片不能太多,或許可以發揮作用,可以參考官方的說法 http://buzz.blogger.com/2010/02/auto-pagination-on-blogger.html

部落格數字分頁效果(Page-Navigation-Menu)其實很多人在其他部落格系統都有看過,而Blogger是採用較舊及較新的文章來導引讀者,可是對於想隨機跳到比較早的文章去閱讀的朋友,就沒法完成這個要求,要重新載入頁面很多次才可完成,所以綸太郎才會自己製作一個網站目錄供網友查詢之前的文章,來減少這方面的困擾。

這個數字分頁功能,在首頁及文章分類頁面可達成,但在文章分類頁面,則非設定的部份,有一些小Bug,這部分好像無解,而單篇文章仍舊是維持原有的較新及較舊的文章連結,另外對於網誌存檔這部份也沒法發揮功能,這個東西之前我在Blogger Buster: Numbered Page Navigation for Blogger的文章裡有看過,並且測試過,但是有一些小問題,分頁效果怪怪的,而且很複雜,所以沒有介紹給大家,這次找到另一種方法,只要增加一個網頁元素小工具就可達成,一分鐘你的部落格就有了數字分頁效果,簡單又快速,真的很神奇。

這是原先的格式,

如何做呢? 進入後台→版面配置→網頁元素→新增小工具→Html/JavaScript
然後放入以下程式碼,然後將這個小工具拖拉到本文區下方,按下儲存即可完成。

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

5樓的網友暗夜咆哮表示安裝無法成功,所以將程式碼裡的粗體及顏色註記拿掉,因為有可能會造成無法顯示。

重點是裡面的
var pageCount = 5;

這個數字要和你一個頁面顯示的文章數設定是要一樣的,譬如你設7篇,然後這個Hacks設5篇,就會導致第二頁,他會從倒數第六篇顯示,那就會和前一頁重複了,而造成錯誤。

var displayPageNum=3;,這個語法應該是在你選擇的頁面前後要出現幾頁顯示,譬如我有8頁,當我點到頁面第4頁,如果我設定
var displayPageNum=2,就會出現如下排列,前後各顯示2頁。
2 3 4頁 5 6

其他的CSS文字樣式部分則可自己修改成你喜歡的顏色和大小,甚至加上背景圖案,如果要改成中文,紅色的部分都是相關的程式碼,可以自己修改,例如,
var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First'; 改成首頁
var endPageWord = 'Last'; 改成末頁
var upPageWord ='Previous'; 改成前頁
var downPageWord ='Next'; 改成下頁

將它改成你要的中文字即可。

還有找到這段
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
我把Page改成"頁數",of改成"之"。

這是我簡單修改過後的格式,



如果你的網頁背景是黑色的,記得更改
.showpageArea a {
.showpageNum a {
將原先的黑色字color:#000000;改成灰色的,或是其他顏色,color: #666666;
才不會一片黑色,看不到字。

不過這個元件會稍微影響部落格載入的速度,所以我測試過後,如果網站速度不理想我就會拿掉,但我想還是有人會有這方面的需要,大家參考看看。

2009年2月13日 星期五

兩欄式簡潔的模板Flashyweb ---改版分享


最近換了這組新的模板,大致上的反應還不錯,曾經使用過兩欄式的模板,但總覺得版面容易拖得太長,滑鼠要滾動好多次才能到底,對我這種懶人而言,能避免就避免,但是最近或許受到金融風暴的影響,很多事都趨向單純化,原始化,所以也想改個版面,配合一下自己回歸簡單生活的態度。

這次的模板來源為Blogger Templates,其實發現最近兩欄黑白模板還蠻流行的(這是WP的),找到類似的,然後用我喜歡的深藍為背景,點綴一些紅黃綠的顏色,讓頁面不至於太嚴肅或是單調,當然文字大小也要調整,至少要自己看的舒服,不用瞇瞇眼看文章,Logo設計則以被光纖纏繞而發光的地球來代表"世界"這兩個字,而漂亮的訂閱RSS圖示則有畫龍點睛的作用,讓畫面一出現就能吸引住讀者的眼睛,(自己稱讚自己真是不害羞,哈),其實以上都是自已的審美標準,至少我自己很喜歡,看倌們就客隨主便吧。

哈拉廢話一堆,該進入重點了,模板的資訊,
作者頁面:New Blogger Template : Flashyweb
展示頁面:http://flashyblogger-btemplates.blogspot.com/
下載頁面:http://btemplates.com/download/813/


原先是淺黃色為底的背景,其實我覺得這個設計者好像模板設計到一半沒有完成,但也可以說他給使用者一個相當大改造的空間,很多元素定義都沒有內容,或是多了一些不必要的定義,應該是作者在測試版面時加進去的,沒有刪除,不過我還蠻喜歡這個版面的配置與一些顏色的應用,所以就把它改版成現在這個樣子,另一個重點是他可以使用內嵌的留言功能,而不用改程式碼。

這個模板面最大的問題就是回應區的第一則留言會跑到文章頁尾區,如下圖:


找到
.post-footer {
float: left;
color: #006EA6;
}

將裡面的float: left;給刪除即可,這個.post-footer {,要注意有兩個,下方那個才是要改的。


還有一個小地方,就是p, ul, ol {及.post {和.post-body ul {的定義裡,
text-align: justify;
這個會讓你的文字編排在某些情形下有分散對齊的功能,這在Firefox的瀏覽器會發生作用,IE6好像沒有影響,建議把它刪除,讓你的版面看起來會比較一致。

另外這個模版最上方及最下方都有提供功能表,找到
<div id='menu'>
<ul>
<li id='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>
</ul>
</div>

下方功能表
<div id='footer-menu'>
<ul>
<li id='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>
</ul>
</div>

將粗體文字及連結網址改成你自己的即可,而
a expr:href='data:blog.homepageUrl + "feeds/comments/default"'這種語法,可以直接改成a href='你要的網站網址'就可以,而最後的 a href='#',井字就是放進你的網址,如果想新增連結就加入
<li><a href='網站網址'>網站標題</a></li>
這行即可,如下圖這樣


上方的連結如果太多,可以修改#menu {裡的寬度,width: 400px;,將寬度設更寬。

另外搜尋框,如果不想用,而想放上AdSense搜尋列,找到
<div id='search'>
<h2><b class='text1'>Search</b></h2>
<form action='' method='get'>
<fieldset>
<input id='s' name='s' type='text' value=''/>
<input id='x' type='submit' value='Search'/>
</fieldset>
</form>
</div>

把它刪除,然後在後台網頁元素新增Html/JavaScript的小工具將你的AdSense程式碼放上即可。

而目前加入的Blgger Hacks資源
1、繼續閱讀(ReadMore)
2、社交書簽功能列(Social Bookmarks)
3、FunP推文鈕
4、單篇文章AdSense廣告
5、相關文章(Related posts)
6、頁尾訂閱提醒
7、回應編號(Comments numbering)
8、標籤分行
至於SEO版面優化部份,
部落格文章標題優化,加強SEO效果
為你的網站加個小圖示---Favicon(其實這個很重要,我常在書籤頁面裡,直接認icon來瀏覽網站)
如何控制文章網址的產生
Meta的重要性,對搜尋引擎而言
Blogger template模板教學課程---概說及基本結構,裡面的head宣告加入了部落格關鍵字(keyword)

所以說雖然整個版面看起來簡潔,但是實際上要利用到的東西還真不少,如果是初學者可以慢慢加上去,不用一次把它用光。

整個模板大致的改造情形就是這樣,這個模版還蠻簡單的,只是我自己放進去的東西很多,有興趣的朋友可以留言討論,其實還有想寫的東西,但是又把文章寫太長了,下次再分享了。

2009年2月11日 星期三

設定留言回應編號,讓部落格互動更活潑


常看到別人的回應留言區有這個功能,在部落格裡喊話,幾樓的聽到了嗎?覺得很有趣,這個留言編號的功能讓部落格主和網友的回應不僅是一對一的直來直往,更能交叉留言,讓部落格上的消息傳遞更迅速與多樣化。


2009.11.7更新,
因為blogger官方釋出大頭圖像的功能,原先的模板修改方式已不適用,更換模板者,請參考這篇的作法,
回應編號與留言者大頭無法並存之解決之道


會想裝這個Hacks其實是針對很多朋友來這裡找尋blogger版面的設定技巧,其實許多細節或是功能,我自己本身不熟或是沒有接觸,但是都會有許多好朋友跳出來幫我解決或是分享他們改版的經驗,像是阿榮教練南野紗羅等,我很感謝他們,有時回覆留言中無法正確指出回應的是那一則,因為blogger官方制式的規定,無法針對某一則直接回應,而都是放在最下方,所以裝上這個Hacks或許也能解決一些流程上的錯誤與遺漏吧。

這是Google Blogger專用的,如何操作呢?(記得原先的template要備份留存)
進入後台→版面配置→修改Html→勾選展開小裝置範本,然後找到下面這一區就是dl到/dl這塊回應的程式區
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

然後以下列程式碼代替
<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

然後在CSS程式區,找到Comment這區,加入下列定義:
.comment-number {
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: 0px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 24px;
line-height:26px;
font-weight: bold;
}
/*since the numbers are actually links, we need to force the color properties*/
.comment-number a:link, .comment-number a:visited {color: #445566 !important; text-decoration: none !important;text-decoration: none;}
.comment-number a:hover, .comment-number a:active {color: #FF9933 !important; text-decoration: none !important;}

其中的顏色與字型大小,可以自己修改,這是我參考下面的文章作成的,依他的方法沒法成功,將回應編號定義改成.comment-number,就能出現了,如果你的部落格留言較多時,不妨可以考慮使用這個Hacks,像我另一個網站東京封印留言數寥寥,就不用使用這個了,只有1、2樓也沒啥意思了,哈。

2009年2月7日 星期六

隨時記錄你的部落格統計資料


這算是有點雞肋的blogger工具(blogger Statistics),可以統計出你的部落格文章及回應的數量,如果有需要的朋友可以裝上去玩玩。

後台版面配置→網頁元素→新增小工具,新增HTML/JavaScript,然後放入下列語法即可,這是限定Google的blogger使用,

<script style="text/javascript">

function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

</script>

<ul><li><script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

<noscript><a href="http://assessmyblog.blogspot.com/" target="_blank">Widgets for Blogger</a> <a href="http://www.bloganol.com" target="_blank">Bloganol</a></noscript>

其中紅色的yourblog記得改成你的部落格名稱,譬如我的是01mistery,
而綠色的Total Posts及Total Comments,也可修改成中文你要的文字,可以彈性運用,算是自己一個部落格的統計數字吧,當你的文章和回應累積一段日子後,或許可以放上這個小工具,給自己做個紀錄吧。

2009年2月1日 星期日

吊車尾的藍眼佳作‧謝謝鄉親父老們


第58次藍眼觀注結束,春節假期也到尾聲,0與1謎詭世界,以39票總分755分的成績,勉強搭上藍眼佳作的尾班車,算是低空飛空吧,謝謝39位朋友把票投給我的部落格,及舉辦此項活動的部落格觀察網站,讓我拿到了藍眼佳作的這張貼紙,我也把他放到我的統計資料裡,當作一項紀念吧。


第58次藍眼觀注得主,有三位,藍眼佳作有六位,其中我的5票中就投中了3位,除了投給自己,


還投給企鵝碎碎唸舊書店日記MUKI space*ajneok 亂芭樂,這些都是我覺得很棒的的網站,其中舊書店日記,更是啟蒙我到日本尋找舊書店的部落格,這次和他同時入圍覺得很高興,而企鵝碎碎唸裡頭豐富的資源也造福許多喜歡在blog上掛些Widget的朋友,不管何時到他的網站上,永遠是熱鬧滾滾,很喜歡那種氣氛,而ajneok亂芭樂的k2繁體中文語系也造福了許多人,當然包括我,Muki Space則是在Sango家(4月17聯絡簿:菜鳥ID保護區)知道的,從這兩個網站也學到很多關於WordPress架設部落格的技巧,以上這四個網站都是非常優質的,投票給他們來表達自己的感恩與支持,我想是否入圍甚至得獎並非重點,而是網路上的許多部落格真的帶給我許多知識與動力,生活也因此而豐富,這是寫部落格這麼久以來覺得這是最大的收穫,也認識了許多朋友,其實也從中窺見人生百態,了解網路上現象與生態。

我想這次藍眼觀注的活動,帶給我很多省思與想法,只是這種太過肚臍眼的文章不太適合在此發表,資訊歸資訊,生活歸生活,人有多樣面,我想2009年會有更多人加入部落格這塊園地,而我希望就是使用Google Blogger系統的人會越來越多,官方開放的功能會越來符合使用者的需求,最後再一次謝謝投票給我支持我的朋友們,感恩。