Blogger Pages分頁功能讓您輕鬆有個導覽列 | blogger分頁教學

Blogger又推出新功能---Blogger Pages,部落格導覽列(Tabbar)的設置,或是稱為獨立網頁(分頁欄)的設置,讓你可以輕鬆的連上你想特定宣告的文章頁面,例如 ... 綸太郎你好讀了你的教學讓我成功做了導覽列非常謝謝你的文章網頁首頁文章索引(即時)Facebook東京封印2010年1月25日星期一BloggerPages分頁功能讓您輕鬆有個導覽列2010.2.18更新,BloggerPages已正式釋出,非測試版了。

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

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

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

如何製作呢?由於是測試區的功能,所以我們須登入測試區的頁面,http://draft.blogger.com,你會看到你的資訊主頁變成以下這樣,多了一塊淺藍色的區塊這時我們要新增導覽列,要增加兩個地方,第一、在標頭下方的網頁元素,新增小工具---網頁,這時你會看到只有首頁一個tab,這時我們可以按下儲存然後離開。

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

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

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

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

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

如果你是非官方的的部落格,進入BloggerinDraft並沒有看到標頭下方的新增小工具列,你可以回到後台的版面配置→修改Html,記得不用展開小裝置範本然後找到
將裡面的no改成yes就會出現了。

如果還是找不到,就在後面或是前面,加上上述語法即可,導覽列除了水平方式展現,也可以拖曳到邊欄,讓它成垂直顯示,要怎麼利用,就看自己版面的需求。

另外這個導覽列在後台的定義是PageList1,如果你想要給他不同的外觀,例如顏色、大小,可以自行在css區(加在]]>之前即可)自行定義。

例如:#PageList1{background:#FF7F7C;font-size:14px;}就會變成以下這樣以下要談的則是另外的運用,初學者建議跳過,我想有的朋友可能想說要將導覽列連結到其他非獨立頁面的網頁,例如連結到你的Facebook頁面,目前綸太郎研究出來的只能放在這個官方產生的頁面的後面(或前面),沒法加入拖曳的獨立網頁裡,如何做呢?先備份原始檔案,然後到後台的版面配置→修改Html,展開小裝置範本,然後找到crosscol-wrapper這個區段,下面有個b:loop開始的迴圈程式碼,li就是獨立網頁的項目,需在loop迴圈後面加上你的連結,其實前面也可以,不過應


常見投資理財問答


延伸文章資訊