2010年2月24日 星期三

Blogger官方自動分頁機制(Auto Pagination)


最近有些朋友可能發現自己的分頁為什麼怪怪的,沒有以自己後台的設定篇數顯示,其實在2月18號,官方就已經公佈要實施Auto Pagination(自動分頁)機制,目的是加速Blogger瀏覽的速度、減少延遲latency 的現象,會採取這個動作是因為考慮到使用者因為網頁delay延遲的關係,而減少了閱讀網站的意願。

為什麼會這樣做?其實Google完全是基於改善網路瀏覽緩慢的結果,他有提出一份調查報告,其實對多數人而言,可能會覺得不方便,為什麼崇尚自由與彈性的Google Blogger要做這樣的限制,Google Buzz有相關的文章說明,
Latency is a word you hear a lot at Google. We are always looking for ways to make our products faster, because we have consistently found that faster page loads mean more satisfied users. This post is the first of an occasional series that will discuss ways in which we’re working to make blogs load faster for all users.

更多詳細內容請見
Auto Pagination on Blogger

他的文章裡面有提到這段,
Starting today, we’re rolling out a change that affects how we paginate webpages on Blogger. We will dynamically adjust how much content to send to the browser depending on (a) the amount of HTML on the page being requested (in kilobytes) and (b) the number of images on the page. Users can continue to use “older posts” and “newer posts” navigation elements to see additional posts.

大概的意思是說,如何去分頁,是根據文章的Html數量和圖片大小的總數去判斷,你可以利用較舊或是較新的文章去瀏覽其他的文章。

其實推出以後,在Blogger論壇上很多都發出反對的聲音,要求要disable這個功能,有人認為是Google的工程師為了垃圾或是間諜部落格(Spam Blog)而開發了這個功能,而犧牲大部分正常營運的部落格,有人覺得會造成災難型的後果,版面不能照自己的意願去調整,而有人則是提出有較舊/較新的文章,為何還要強制要求一個頁面有幾篇文章,就讓Google自動調整,眾說紛紜,有興趣的朋友可以看看。

How to disable auto pagination

這個自動分頁效果是針對,主頁面、搜尋頁面(search results pages)、文章分類(label pages)和索引頁面(archive pages)所限制的,單篇文章頁面沒有限制。

我想第一個影響到的就是沒有用繼續閱讀功能的部落格,另外就是首頁圖檔大的部落格,其實Google考慮的方向是沒錯,真的有些部落格首頁充滿許多大圖片,讓人瀏覽很不方便,沒有耐心的可能就轉台了,但是我覺得對官方而言有差嗎?頂多是我不去看那個網站,我知道有些ISP有限制圖檔外連的空間大小,有些甚至不開放外連,但一個頁面限制K數,我倒是沒有聽說過,或許國外的部落格很多不用繼續閱讀造成的,我猜。

所以目前,Blogger後台那個設定主網頁顯示: 幾篇文章的功能是沒有什麼用,例如我設8篇,主頁出現6篇,如果設6篇就剛好符合他的限制,但是在文章分類這些設定是無效的。

那如何讓自己的頁面可以多放些文章呢?
1、當然就是使用繼續閱讀(Read More),而且讓顯示在繼續閱讀按鈕之前的圖片小些,以減少載入的K數。
2、使用Chagg's 嘴砲日記: Blogger Beta讓Lable及Archive頁面只顯示標題
3、如果你的文章已經有上百篇,建議還是要自己做個文章目錄,方便讀者搜尋,例如我的部落格上就有網站目錄,如果不想人工自己一筆一筆寫上,可以參考這篇
幫部落格做個網站目錄(文章列表)吧

這個改變對我影響不大,其實對台灣的使用者應該也不會有太嚴重的影響,因為大家早就會用繼續閱讀的Hacks,這幾乎是必備的工具,我常看歐美或是日本的blogger使用者,很多都是一篇文章長長到底,所以影響比較大吧,對綸太郎而言,加強部落格的黏著度及降低部落格的跳出率是比較實在,相對於Google利用Auto Pagination來增加瀏覽率而言,但這項限制比較有影響的就是畫面的美觀度,因為文章區和邊欄區沒有平行看起來有點醜就是了。

如果有更多相關的資訊,歡迎提供參考。

參考來源:
Blogger Buzz: Auto Pagination on Blogger
延伸閱讀:
提高部落格的黏著度
裝上隨機文章(Random Posts),加強部落格的黏著度

2010年2月19日 星期五

新增Google Buzz 評論按鈕及Facebook Share推文分享計數按鈕


為了跟得上資訊潮流的腳步,綸太郎也稍微調整部落格的模板,提高網站的互動性,增加了最近新的工具Google Buzz的評論按鈕,也一併增加Facebook 分享數量按鈕(share count button)的功能,讓自己的文章有更多的機會讓他人閱讀到,只要小小的動作,就可以分享好文給大家,何樂而不為呢?

【新增Google Buzz評論按鈕】
按鈕的語法為
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bookmark To Google'><img alt='Google Buzz it' border='0' src='圖片網址' title='Google Buzz it'/></a>
也有JavaScript語法
<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'>
<img src="圖片網址" border="0" title="Google Buzz Share Buttons PSD" alt="Google Buzz Share Buttons PSD" alt="Share on Google Buzz"/></a>

兩種皆可用。

Google Buzz的圖片有很多種,看你的版面適合哪種,下載到自己的空間即可,由於是png圖片,所以是透明圖層的背景,不限於白色,會比較適合各種顏色的模版使用。

長方形的 89*24px


大圖的正方形 58*72px



小圖的正方形58*72



參考來源:
Google Buzz Share Buttons PSD

【新增Facebook 分享數量按鈕】
這個Facebook官網上即有提供,請參考分享 | Facebook


看你喜歡哪種的,將程式碼複製到你的模板內即可,但由於綸太郎的按鈕背景為深藍色,圖片會有一塊正方形,很醜,所以不適合用,另外和其他按鈕並排時,在IE底下瀏覽會被推到下方去,除非我把它排列在第一位,也就是Funp推文按鈕前才不會被擠到下方去。


所以我想Facebook 的分享按鈕預設是套用在白色的背景,所以我就將按鈕放在文章日期的那個區段,用小按鈕來配合日期欄的版面。



如果你也想放Facebook的按鈕在文章區的不同區塊位置,可以參考這篇
Blogger Widgets: Facebook Share Count Buttons For Blogger

有人或許會問要放在模板的何處,我想大部分的模板都有社會書籤的功能,將語法和他們放在一起即可,看你要他顯示在何處,自己再將語法置入即可,通常是 post-footer-line-1或是 post-footer-line-2,如果想放在本文上,可參考
將Google AdSense放入本文裡
單篇文章加入共享書籤(Social-Bookmarks)
,大概是類似的作法即可達成。
不過這個Facebook分享按紐,是分享到個人的塗鴉牆上,而無法選擇分享到自己的粉絲專頁,所以還是要透過網誌的設定,自動轉貼到塗鴉牆上,不過我覺得更新太慢,都是用手動的轉貼。

其實綸太郎裝了這個東西後有點被嚇到,最近寫的日本櫻花前線系列文章,2010 年櫻花前線預測搶先報,居然被分享83次,另一篇也有56次,可見Facebook現在的傳播能力是大過很多媒介了,因為很多資訊都需要登入FB或是和對方成為朋友,偶爾才會知道有人轉貼你的文章,所以經營Facebook的粉絲專頁也是相當重要的,會幫你的部落格帶來流量,也可和網友互動,有興趣的朋友可以貼上這兩個功能貼紙,幫自己的部落格增添人氣吧。



2010.11.3更新
因位目前Facebook改版後,share功能已經拿掉,如果需要的朋友可以參考這篇,
Facebook share counter button推文計數按鈕如何安裝

2010年2月4日 星期四

利用部落格來架設屬於自己的書籤資料庫網站---製作篇


上次談完如何利用部落格來架設屬於自己的書籤資料庫網站的概念,接下來就要分享怎樣把部落格變成網站的形式,架設屬於自己的書籤網路連結資料庫。

通常網站的功能是介紹某項主題的資訊或是詳細內容服務,與讀者的互動通常都是透過email來連絡,或是留下聯絡電話或是住址,跟部落格有著和讀者互動的及時性與可親性很不同,所以近幾年來部落格才會發展的如此迅速。

而我們用部落格來架設網站,因為不需要有留言迴響或是文章列表等服務,所以在後台可以把這些元件給隱藏起來或是刪除,但綸太郎不建議刪除相關的html架構,因為有可能官方修改模板架構,或是你想改模板時會造成適用的困難度,所以還是建議用隱藏的方式。


以下是以Protonema Blogger Template這個模板來說明,可分三大部分:

【部落格基本設定】
1、 關閉留言機制,不開放留言
後台→設定→意見,設為隱藏,還有反向連結也設為隱藏
2、 關閉RSS,讀者訂閱(這部份可彈性運用)
後台→設定→網站提供→允許網誌資訊提供,設為"無",為什麼說彈性,這是因為以我的部落格而言還有分頁的選項,以後還會更新延伸的分類,所以目前我是保留。
3、 隱藏網誌文章的相關選項
這有兩個做法,第一個從後台設定部份來執行,比較簡單,後台→網頁元素→把網誌文章的部份打開,所有的選項都不選取,這樣就都不會顯示了。



【CSS定義方面】
如何隱藏呢?最常利用到的就是dispay: none; 及 height:0;這兩個敘述。
1、如果上述第3項,隱藏了作者、分類、日期、留言等有關post-footer的部份,也可以在CSS部分找到相關的定義,用display: none;來設定亦可。
h2.date-header{ display:none; /*文章日期*/
.post-author{ display: none; /*作者名稱*/
.post-labels { display:none; /*文章分類*/
.post-comment-link { display:none; /*意見連結*/
.post-timestamp { display:none; /*發表時間*/
甚至.post-footer{ display:none; /*文章頁尾*/都可以整個隱藏起來

2、回到首頁、較新或較新的文章、及訂閱的連結
#blog-pager-newer-link { display:none; /*較新的文章*/
#blog-pager-older-link { display:none; /*較舊的文章*/
#blog-pager { display:none; /*回到首頁*/
.feed-links { display:none; /*訂閱連結*/

【元件只在首頁顯示】
如果你的網頁只有一頁,這部份可以跳過,由於我這個網頁無法放入所有我蒐集的連結,除了日本全國的資料,我還分為東京、關西、九州三大部分,所以勢必會出現單篇文章的延伸頁面,單篇文章的文章區和主頁的不同,主頁只有短短二行字,單篇頁面如果在放上和主頁相同的小工具,勢必會將整個版面往下推擠,整個版面會變得很難看,所以單篇文章的頁面,儘量維持主頁面和兩邊的工具欄維持同一直線的配置。

例如文章區下方我放了七個小工具,而在單篇文章頁面我只有出現兩個小工具,這是怎樣做到的,

以下是主結構圖,


單篇文章下方只有兩個小工具,


如果你想讓元件只出現在首頁,不在單篇文章出現

後台→網頁元素→修改Html,展開小裝置範本,找到該元件的html架構區,我以流行雜誌這一個區塊為例,
找到流行雜誌,這個元件定義是Html17,然後在
<b:widget id='HTML17' locked='false' title='流行雜誌' type='HTML'>
<b:includable id='main'>
下面放入這行程式碼
<b:if cond='data:blog.pageType != &quot;item&quot;'>
再找到下面一點點的
</b:includable>
</b:widget>
在上面放入
</b:if>
這個敘述,那流行雜誌這個元件就不會出現在單篇文章,而只會出現在首頁。
類似以下的圖


這樣大致就可以完成整個書籤部落格網誌的配置,至於用表格製作的書籤,我是利用Google文件製作的,再放到部落格的小工具裏。

另外還有一個小技巧,我的首頁文章,
歡迎來到這個部落格!!,原來的連結應該會是
http://japanplay.blogspot.com/2009/11/article.html
但我還是要讓他連到首頁,這時我們在編輯文章時,文章標題區下方有個連結,我們讓他指向首頁,設成
http://japanplay.blogspot.com/
這樣即可,如果發現你的修改文章區沒有這行,到後台的設定→格式→顯示連結欄位,把它設定為是,就會出現了。


還有不同元件背景及文字顏色不同,我是利用新增小工具,直接寫入語法,而非在像以前在後台編輯,這個做法可以不增加後台檔案的負擔,如果想移除元件時也不必修改Html的語法,這種作法綸太郎以前沒有介紹過,

例如橘色的時刻表查詢,


新增小工具,然後放入以下的語法,直接在小工具裏定義css語法,前後用<style type="text/css">
及</style>圍起來,後面再放入架構的語法。
<style type="text/css">
#orgmenu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghcjnnUZeKNE9D1WMVldydneLI48TslnPwqXou7ZD32obuJr4VqT0YCLK1E4-RAtEr4N0SD_5RqpmLkb-xSS-f8nxU3siKHmhL3lVda6W37R5pK-gRvkt_UmjCu0esY_PVsQ912apcI2E/s1600/orengenmenu.jpg) no-repeat;
width:195px;
height:250px;
padding:5px;
}

#orgmenu ul{
list-style:none;
padding:10px 8px 0 8px;
}
#orgmenu li{
list-style:none;
display:block;
padding:5px 0;
}
#orgmenu li a{
list-style:none;
display:block;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:8pt;
text-decoration:none;
padding:0 5px 0 10px;
}
#orgmenu li a:hover{
color:#ff0000;
text-decoration:none;
}
#orgmenu li .current{
list-style:none;
display:block;
color:#fff;
font-weight:bold; text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#orgmenu li a.current, #orgmenu li a:hover.current{
color:#fff; text-decoration:none;
}
</style>
<div id="orgmenu">
<ul>
<li>項目內容></li>
<li>項目內容></li>
<li>項目內容></li>
</ul>
</div>


最後介紹有個小工具,很多人有興趣的就是分頁的Widget小工具,


程式碼的來源,一分鐘在Blogger加上Tab View分類欄 凱特打結該該叫,大家可以參考作者的語法,自己再修改內容就可使用了,相當的方便。

以上大致就是以部落格形式來架設網站的教學分享,這是我自己修改模板的經驗,部落格不只是可以天天寫寫文章,也可以利用這種架構來設立網站,或許還有更多不一樣的利用,如果有想到更多的Idea再跟大家分享囉。
延伸閱讀:
利用部落格來架設屬於自己的書籤資料庫網站---介紹篇

2010年2月1日 星期一

利用部落格來架設屬於自己的書籤資料庫網站---介紹篇


由於綸太郎自己有一個日本旅遊的部落格,之前有利用Google Sites架設一個日本旅遊資料庫的Sites,但鑑於很多功能無法利用,目前已停用,也把裡面的資料轉為部落格使用,成立一個日本旅遊資料蒐集為主的部落格。

這種以書籤資料庫連結為主的部落格,當然Blogger模板跟普通部落格Template會不太一樣,要能提供大量連結的頁面使用,可能更新也很少,最主要是當作書籤網站來應用。

日本旅遊資料庫
這是我自己的經驗,常常要搜尋網站時都要從長長的書籤裡去找尋,雖然有分門別類,但是書籤仍是落落長,有人有建議可以利用iGoogle去創造屬於自己的首頁,但我總覺得不適應我自己的需求,所以想到用部落格來製作,一方面如果用網頁格式去做,耗費曠時,而且一個免費又穩定的空間難尋,當然就使用自己熟悉的部落格系統Google Blogger來執行這項任務。

用部落格語系統去製作書籤網站,有幾個重點及優點:
1、當然你要蒐集相當多某領域的書籤連結
2、文章區非重點部份,所以可以選擇文章區寬度較小的模板
3、文章回應功能可以關閉,由於屬功能性部落格所以此功能不是很需要
4、邊欄小工具一定要很豐富,可以用4欄、甚至5、6欄的模板,以下會介紹
5、一定要有導覽列,可以作為大分類的延伸書籤
6、把它當作自己的入門網站來利用,甚至是宣傳行銷的工具

以下就是我的模板的後台配置,你可以看到網頁元素裡面可以新增小工具的單元非常多,可以彈性的運用。


這是我自己成立的書籤部落格,樂遊日和一二三,有興趣的朋友可以去看看,大概就是這種形式,我的首頁只有一篇文章,短短的二行話,
歡迎來到這個部落格!!
第一次來的朋友,歡迎將此站加入我的最愛書籤。


其他的都是利用網頁元素的新增小工具完成的,沒有最新文章、迴響及文章索引的服務。

以下這些模板,是目前我蒐集到適合這種書籤式部落格來使用,大家搜尋時可以用” Magazine”雜誌類的範本做搜尋,通常4-6欄的部落格範本就適合用。

SCHEMER MAG


這位朋友就是利用這個模板製作的部落格,超厲害fREE2Favorites--利用部落格做網頁連結配置,大家可以去參觀,我的起初概念也是從這裡來的。
Live Demo
Download

Protonema Blogger Template


這是個六欄式的部落格,上方是三欄式的,sidebar旁邊還可以有一個寬欄位,而頁尾再分為三區,也有導覽列的設置,這是我目前利用的Blogger範本。
Live Demo
Download

Amoebaneo Blogger Template


格式和上面的Protonema Blogger Template幾乎一樣。配色及圖案不同。
Live Demo
Download

Blue Love


Live Demo
Download

Xclear Blogger Template


Live Demo
Download

White Clean Magazine


Live Demo
Download

Simple Fresh Magazine Blogger Template


Demo
Download

利用以上這些模板來做一個書籤連結的部落格,是因為Google Blogger支援Java Script的語言,所以你要放一些Widget小工具也很方便,更可以放上廣告增添收入,有些人喜歡部落格小工具,也可以都把它放上來。

由於綸太郎是將它當作自己東京封印的資料庫連結網站,例如你喜歡美食、電腦、漫畫、遊戲等,各種專領域的東西,都可以這樣來設立一個自己專屬的書籤部落格,其實要成立這種部落格,我想是要對你熟悉的領域相當熱愛才行,或是你的文章已經有上千篇,但想將他用更簡明的方式讓讀者瀏覽,而自己又不會網頁設計的朋友,可以參考看看,不一定是最好,但綸太郎覺得這是可以擴大部落格應用的一種方式。

下一篇會繼續談到如何在Blogger後台設定,讓你的部落格更符合書籤網站的特性,也會分享一些版面小工具配置的技巧。

延伸閱讀:
利用部落格來架設屬於自己的書籤資料庫網站---製作篇