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?