如何利用Facebook帳號製作部落格的留言板---安裝篇

2011.3.18更新，
因為Facebook改版，此方法已不適用。
2010.8.21更新，
未來Facebook已經不再支援FBML語法，所以此篇教學內容已沒有作用，未來是以iFrame語法為支援對象，等綸太郎研究過後再跟大家分享。

如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用)

2011.3.18更新，
因為Facebook改版，此方法已不適用。

最近看了重灌狂人的文章在部落格嵌入Facebook留言板，借3.5億個會員讓流量破表！（Facebook Connect），發現了這個Facebook Connect的好東西，利用Facebook Developers(開發工具)來跟部落格做結合，雖然他介紹的留言迴響(意見箱，Comments Box)無法使用在一般的部落格系統，但綸太郎研究了一下，是可以套用在Google Blogger的，單獨設定為類似Cbox功能之類的留言板。

Blogger Pages分頁功能讓您輕鬆有個導覽列

2010.2.18更新，
Blogger Pages已正式釋出，非測試版了。

Blogger又推出新功能---Blogger Pages，部落格導覽列(Tabbar)的設置，或是稱為獨立網頁(分頁欄)的設置，讓你可以輕鬆的連上你想特定宣告的文章頁面，例如關於我(About Me)、連絡頁面(Contact Me)、部落格資訊的頁面等等，主要就是和部落格文章性質不同的頁面，用來說明或是加強宣傳等等的工具頁面。

在過去我們可能要透過自己在後台加入語法，或是套用非官方的模板才能達到這個效果，譬如綸太郎之前曾寫過的在部落格名稱下方放個水平連結導覽列，就是自己改造模板，現在Blogger 測試區也推出了這個功能讓我們試用，如果有興趣的朋友，可以玩玩看。

由於是Blogger 測試區(Blogger in Draft)推出的功能，可能還有些不穩定或是會再更新，但是我想不久後應該會正式推出，因為現在新增的部落格已經加入了這塊區間，看以下這張圖就可得知，原先標頭下方是沒有新增小工具列的空間的，現在多了一塊出來。


如何製作呢?
由於是測試區的功能，所以我們須登入測試區的頁面，http://draft.blogger.com，你會看到你的資訊主頁變成以下這樣，多了一塊淺藍色的區塊



這時我們要新增導覽列，要增加兩個地方，
第一、在標頭下方的網頁元素，新增小工具---網頁，


這時你會看到只有首頁一個tab，這時我們可以按下儲存然後離開。


第二、來到文章區的功能頁，你可以發現多了一個，編輯網頁的頁面，這就是可以製作你要的獨立頁面。


寫好相關內容後就可以發佈了。

注意：網頁頁面的網址和一般文章網址是不同的，

http://blogname.blogspot.com/p/about-me.html

他是以 p 為分頁的區別，和一般我們的2010/01以年月來分不一樣，為什麼我的網址會出現about-me而不是官方的blog-post，可以參考
如何控制文章網址的產生這篇的說明。

Blogger官方目前釋出可以發佈到10個獨立網頁，你可以先發佈幾個，就可以到後台的小工具去調整這些頁面顯示的順序，譬如我目前已製作了三個獨立頁面，在網頁小工具裏就可以看到，如下圖所示，
記得裡面的Automatically add new pages when they are published，要勾選才會自動出現在順序裡，沒有的話，以後再勾選也是可以的。


可以到前台看你的部落格，就會出現導覽功能了。


如果你是非官方的的部落格，進入Blogger in Draft並沒有看到標頭下方的新增小工具列，你可以回到後台的版面配置→修改Html，記得不用展開小裝置範本
然後找到
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
將裡面的no改成yes就會出現了。

如果還是找不到，就在 <div id='content-wrapper'>後面或是 <div id='main-wrapper'>前面，加上上述語法即可，

導覽列除了水平方式展現，也可以拖曳到邊欄，讓它成垂直顯示，要怎麼利用，就看自己版面的需求。

另外這個導覽列在後台的定義是PageList1，如果你想要給他不同的外觀，例如顏色、大小，可以自行在css區(加在]]></b:skin>之前即可)自行定義。
例如：
#PageList1 {
background: #FF7F7C;
font-size: 14px;
}
就會變成以下這樣

以下要談的則是另外的運用，初學者建議跳過，我想有的朋友可能想說要將導覽列連結到其他非獨立頁面的網頁，例如連結到你的Facebook頁面，目前綸太郎研究出來的只能放在這個官方產生的頁面的後面(或前面)，沒法加入拖曳的獨立網頁裡，如何做呢?

先備份原始檔案，然後到後台的版面配置→修改Html，展開小裝置範本，然後找到crosscol-wrapper這個區段，下面有個b:loop開始的迴圈程式碼，li就是獨立網頁的項目，需在loop迴圈後面加上你的連結，其實前面也可以，不過應該很少人會在前面加，就在 </b:loop>後面加上以下語法即可。
<li><a href='http://www.facebook.com/01misteryfans'>Facebook</a></li>
要加幾個連結都可以，語法就像這樣
<li><a href='欲連結的網址'>連結名稱</a></li>


加上這個超連結，就沒有官方的10個獨立網頁的限制了。

加入導覽列可以讓你的部落格功能更豐富，更完整，這裡可以加入關於我或是部落格文章的總整理，讓版面的配置更彈性，隨著越來越多的網路功能，或許你也跟綸太郎一樣覺得頁面有些擠，把他整理成獨立頁面也是可以運用的方式，跟大家分享。

P.S.目前的模板並沒有套用這個功能。
參考來源：
Blogger Help:What Are Pages?

浪漫情人節的部落格小玩意

今年的情人節(Valentine's Day)2月14日剛好碰到大年初一春節，真是吉祥又溫馨的日子，看到網路上有幾款戀愛時計自己很喜歡，雖然天氣很冷但我想戀愛中的人永遠都沉浸在溫暖的春光中吧。

文章內自定一個重點筆記的區塊

很多時候我們寫文章時可以利用不同的CSS格式，幫自己的文章作點不同變化，常見的就是引用(blockquote)及程式碼區的(Code)設計，另外很多人也有使用在文章下方加註重點畫記，今天綸太郎則是要分享自己用筆記本或是大型圖示，標記文章重點的方式，當然粗體及下橫線及顏色標記也是最基本的一種。

這個方式很簡單，你也可以試著自己做看看，利用不同的背景圖來當作重點標記的變化。

應該有些人在上篇文章就有看到這個效果了，原理也和以前談過的一樣，先下一個css定義，然後將要使用的文字用div或是span將他圈起來即可。

div和span的不同在哪裡?
div是針對整個區塊的設定，而span則是針對一段文字的設定，兩者是不同的，大家可以試看看，就知道效果是怎樣。

首先當然要先給的定義名稱，例如.post-note，我們把它放到後台版面配置的修改Html裡，放在 ]]></b:skin>之前適當的位置即可。

.post-note {
width: 500px; /*重點筆記的寬度*/
border-right:1px solid #D1D3FF;
margin-left: 30px; /*文字距離左邊的寬度*/
padding: 5px 0px 5px 30px;
background: url(背景圖網址) repeat-y;
}

這裡的圖案我是用長條圖，如下


所以repeat-y要垂直重複，你的文章有多長，背景就會帶到多長，如果想要用固定的長度，加上height: 300px；長度可自定，及overflow: auto;的敘述即可。
然後在編輯文章時，將要顯示在重點筆記區的文字，使用修改Html模式，然後在內容前後用div或是span圍起來即可，如下顯示
<div class="post-note">
重點筆記內容....
</div>

這樣顯示的樣子，就如下面這樣子，我要推薦去年的精選文章，

2009年推薦文章精選：
‧喚回童心的日本超可愛卡通桌布
‧新增Plurk、Twitter及Facebook推文按鈕
‧一分鐘讓你的部落格也有數字分頁效果
‧加強blogger作者留言和一般留言的區分
‧在部落格名稱下方放個水平連結導覽列
‧兩欄式簡潔的模板Flashyweb ---改版分享
‧Blogger Templates│2009年最新模板資源
‧如何利用捲軸讓邊欄（Sidebar）元件縮短
‧將繼續閱讀(Readmore)更改位置或外觀
‧設定留言回應編號，讓部落格互動更活潑

另外一種如果你是要使用一大片的圖案當做重點筆記的背景圖，那相對的寬度及長度就要設定出來，還有捲軸也要設定，所以再來一個新的定義

.post-note2 {
display : block;
padding-top: 50px;
padding-left: 70px;
width: 500px; /*重點筆記的寬度*/
height: 351px; /*重點筆記的高度*/
background: url(http://sites.google.com/site/lunfiles/box/flower.jpg) no-repeat;
overflow: auto:
}

這裡不同的是，要用display:block;的敘述，這樣才能夠設定padding與左右上下的距離。

要顯示的文字內容，一樣
<div class="post-note2">
重點筆記內容....
</div>

顯示如下，

0與1謎詭世界的Facebook粉絲專頁
剛踏入Google Blogger部落格的朋友否有很多的不確定，
來到這裡可以提供你最新關於Google Blogger的訊息
加入這個園地讓你對blogger的操作更快進入狀況
提供修改模版(Blogger templates)教學與小技巧
也歡迎大家分享討論關於blogger的一切

其他的文章區的變化，可以參考以下的文章，
[筆記]在文章裡顯示優質的程式碼區
就是要不一樣! 幫文字段落加上獨樹一格的底線 underline
都是類似的作法，大家可以參考看看。

2009年部落格總體檢與反省

2009年過去了，幫自己的部落格做個體檢表，利用Google Analytics的數據，來檢視過去一年的努力，也為0與1謎詭世界今年的寫作方向做個思索與修正，整年度大概發表了82篇文章，總共累積閱覽人數為將近10萬人次(大概是彎彎一天的人數吧，哈哈)。

總體分析：


發表文章：82篇
總閱覽人數：99,781
頁面總覽：233,583
跳出率：64.34%，這數據是越低越好，所以還有待加強，希望能夠再降低。
平均停留：3分35秒，閱覽頁面2.34頁

訂閱數分析：

訂閱數：增加912個訂閱者，461（2009.1.1）→1373（2009.12.31）
訂閱數大概是裡面比較好看的數據，不過因為看科技類文章的朋友，大部分對RSS訂閱的相關工具都很熟悉，懂得如何運用，所以數字比較高也是可想見的，也感謝訂閱我網誌的朋友。

熱門文章排行榜：

1. Blogger初入門教學彙集
2. Blogger template 超漂亮的模板
3. 如何查詢及追蹤網路留言IP位址的來源
4. Blogger template模板教學課程---概說及基本結構
5. Blogger 新手基本技巧問答(一)--11.4更新
6. Blogger Templates 模板資源
7. Blogger template模板教學課程---CSS外觀解說
8. 0與1謎詭世界文章索引列表
9. Blogger 新手基本技巧問答（二）
10. Blogger 新手基本技巧問答（四）

全部都是2007到2008年的文章，今年寫的全軍覆沒，表示作者我沒有在用心經營關鍵字這一塊，所以補救方法，下一篇會發個2009年推薦文章來彌補一下，今後的寫作也會注意關鍵字的運用，加強文章的曝光度，因為畢竟我的讀者，超過五成是從搜尋引擎來的。

而今年寫的唯一有入30名榜內的就是以下四篇，
喚回童心的日本超可愛卡通桌布（15）
新增Plurk、Twitter及Facebook推文按鈕（24）
一分鐘讓你的部落格也有數字分頁效果（25）
加強blogger作者留言和一般留言的區分（26）

關鍵字排行榜

1. blogger template
2. 電腦無法開機
3. ip位置查詢系統
4. ip位置查詢系統 縣市
5. blogger 模板
6. blogger templates
7. google blogger教學
8. acronis recoveryexpert deluxe
9. blogspot template
10. css template

十個關鍵字，其中模版就佔了5個，這應該不是好現象吧，熱門關鍵字使用率太低，所以應該多參考及利用Google搜尋透視、Yahoo!奇摩搜尋榜、Google Trends等等工具，來提升自己文章的閱覽率。

部落格觀察排名：



從年初的975名↑上升至540名，藍眼佳作2次，分別是58次及69次，也謝謝投票給我的朋友。

其實一直知道自己的部落格缺點在哪裡，但是懶得動手去修正，12月只發表4篇文章，冬天到了很怕冷，所以懶得動腦（謎之音：強辯，根本是腦袋變僵了吧！），所以接下來會針對這些缺點修正，
1、劃分專區文章的設置
2、多多利用社會書籤工具推文
3、文章關鍵字的運用
4、AdSense廣告位置的調整，其實應該要換一個模版了，記得我有發表一篇我的文章Google搜尋引擎找不到怎麼辦?，後來我換了一個模版後，大家可以查詢"東京封印"這四個字，原先搜尋狀態不良的，現在變成有了相關連結文章的搜尋結果，我推測換模版也是提升網站優化的因素，網站閱覽數增加，當然AdSense收入也才會跟著增加。


5、FaceBook粉絲頁面的補強，目前的粉絲專頁有點停滯，要再想想怎樣搭配部落格的運用才是最好的。

這篇文章是寫給自己做參考用的，雖然每天不到500人的閱覽人數，因為寫得不是很熱門的部落格主題的文章，但我想還是有進步的空間，想想應該積極些經營自己的部落格，目前能想到的就是這樣，也是今年努力的目標，也謝謝過去一年閱覽、訂閱綸太郎網誌的讀者，還有熱心留言支持，交換過部落格改造經驗的朋友，希望今年大家都能好好的經營部落格，畢竟Facebook和Plurk確實影響部落格寫作的意願，好好寫一篇文章真的很辛苦，希望能持續下去囉。

新增文章與回應數統計貼紙

2010.4.13更新，
目前此項工具無法正確顯示，建議可以移除，或是有更新的消息，再通知大家。

在Winson的部落格看到的一個新的貼紙，可以顯示文章總數與回應留言數量的貼紙Widget，覺得很不錯， 跟大家分享。

原始工具的網頁：Widget para mostrar el total de posts y comentarios del blog---Ayuda para Blogs

先前綸太郎也有介紹類似的工具，請參考隨時記錄你的部落格統計資料這篇，但是用文字顯示，而這個工具則有圖案搭配，而且有Google Blogger的標誌，感覺正式許多。

只要在後台網頁元素，新增一個小工具，HTML/JavaScript 新增即可
<br /><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif;"><span style="position:absolute; top:5px; right:7px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position:absolute; bottom:5px; right:7px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="http://4.bp.blogspot.com/_Go-jnwB2e7w/Sh1uvD847WI/AAAAAAAABzs/1pXFK4eP7F4/s1600/widget-comentarios.png" /></div><span style="font-size:11px"> Widget by <a href="http://www.vidablogger.com.ar" target="_blank" title="Ayuda para Blogs">Ayuda para Blog</a> </span><br />
標記紅色的是數字出現的地方，以我的版面而言，我是調整為
top:1px;
bottom:1px;
才會符合我的版面設計，試用的朋友，如果覺得文字和圖案沒有對齊，可以從這裡來調整，當然數字大小或是文字顏色也可以自定，在top或是bottom後面多加一個顏色敘述即可，如color:#ff0000;整句語法就類似
bottom:5px; right:7px; color:#ff0000;

當然你也可以設計一個width:108px; height:43px;的背景圖來搭配，畢竟這位設計者不是用英文寫作的，綸太郎稍微改變一下文字，變成中文，如果不想自己改圖的，請自行在下面這個圖按下右鍵，存到你的圖片空間再利用，圖片網址就修正程式碼裡綠色那部份的即可。



顯示如下：