2010年1月25日 星期一

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?

52 則留言:

  1. 放寒假了,多出外走走跳跳吧。

    回覆刪除
  2. 出門呀!我想去台北呢(接下來想去日本)
    寒假過完回學校想找打工機會呢!

    :) 祝我成功吧!^^

    回覆刪除
  3. 看來寒假生活很充實呢,祝成功^^

    回覆刪除
  4. 等了很久終於有這個功能了!

    回覆刪除
  5. 如果出现好像这图的情况,应该怎么解决呢?[IMG]http://i715.photobucket.com/albums/ww158/5036/SHOW.jpg[/IMG]

    回覆刪除
  6. 這應該不是分頁的問題吧?應該是日期格式顯示錯誤的。

    回覆刪除
  7. 哦。。。
    好的,现在已经搞定了,谢谢哦!

    回覆刪除
  8. 請問有了十個網頁清單後怎麼開始一一編輯呢例如:關於我 可否再分為 求學時代 工作時代 等等? 謝謝.

    回覆刪除
  9. 後台→文章→編輯網頁,就可以編輯了,他沒有第二層的設計歐。

    回覆刪除
  10. 請問一下
    我在HTML裡面找不到crosscol-wrapper
    那我該怎麼修改~~~

    回覆刪除
  11. To Alex,你可以參考英文網頁說明自己加上那段語法,或按下'將迷你組件範本回復為預設值'亦可,不過你之前裝的Hacks有可能會不見,記得備份

    回覆刪除
  12. 我也找不到crosscol-wrapper
    而且我嘗試回復為預設值後 也是一樣的結果= =
    參照官方說明要尋找""也是沒有結果@@
    (他說可以加在任何地方 譬如說後 可是我連這也找不到XD DXX=>DIV,用原始的似乎不能留言)

    所以這是什麼情況阿???

    回覆刪除
  13. 我解決了我的問題...
    我硬是新增了crosscol那一段
    結果系統說只能有一段crosscol
    所以就把它當作原本的 照你的方法加入 就ok了!

    謝謝你

    回覆刪除
  14. 看到問題時,你已解決了,沒幫上什麼忙,每個人的模板情況好像都不一樣,回復為預設值',有的有效,有的沒效。

    回覆刪除
  15. 謝謝這篇的分享,不過還有一個小問題,就是要如何發布文章在想要的分頁呢? 而不是一個分頁只能篇及一篇文章。 謝謝你 ^^

    回覆刪除
  16. 那你就以label來當分頁即可,然後新增一個這個lable網頁連結在分頁上即可。 例如這個"blog相關"的label頁面,網址是http://01mistery.blogspot.com/search/label/blog相關,我新增一個分頁
    <li><a href='http://01mistery.blogspot.com/search/label/blog相關'>blog相關</a></li>
    這個方法應該可以。

    回覆刪除
  17. 謝謝你的快速回覆,不過還有一個問題= =
    這樣子是不是會多一個步驟呢?
    例如: beauty 這個label
    然後新分頁就叫"beauty" 可是連過去還需要點擊內文中"beauty"這字眼才會連到相關文章。
    http://gadgetspirit.blogspot.com/p/health-and-beauty.html

    因為我逛過不需要多一個這步驟的blog,所以想問問。

    抱歉這麼長的問題,謝謝你的耐心。

    回覆刪除
  18. 你確定你的語法是放在 </b:loop> 下面嗎?如果是,應該按下beauty,應該出現的連結是http://gadgetspirit.blogspot.com/search/label/Health%20and%20Beauty這裡所有的文章,可是我看你的連結設定還是http://gadgetspirit.blogspot.com/p/health-and-beauty.html的內容

    回覆刪除
  19. /
    我是直接在beauty那個網頁中用連結
    我要點html編輯沒有任何文字出現

    many thanks

    回覆刪除
  20. 可否請您將後段的文章再看一遍吧,是要將label連結加到
    ...展開小裝置範本,然後找到crosscol-wrapper這個區段,......
    而不是在編輯網頁裡面做。

    回覆刪除
  21. 謝謝你,可以了 :))))))
    抱歉一直問你 thanks again


    Linen

    回覆刪除
  22. 小弟分享一下,如果套用新版的Blogger版型的話
    要加入新的網頁版型
    現在要找b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'
    這一行唷

    回覆刪除
  23. 綸太郎你好
    讀了你的教學讓我成功做了導覽列
    非常謝謝你的文章

    我想另外請教您
    如果我想要再自行新增的連結以開啟新分頁的方式開啟
    該怎麼修改語法呢
    謝謝

    回覆刪除
  24. 加上target='_blank'即可。
    <li><a href='欲連結的網址' target='_blank'>連結名稱</a></li>
    如果是從後台直接新增的網頁
    <li class='selected'><a expr:href='data:link.href' target='_blank'>
    類似這樣

    回覆刪除
  25. 您好, 請問要如何排序, 新增連結外部網頁的選項不能直接拖放.

    回覆刪除
  26. 如果有好幾個外部網頁的連結,在html直接剪下貼上li那行外部網頁的程式碼排列即可,不過他只能放在官方設定的page前面或後面就是了,不能插到中間去。

    回覆刪除
  27. 郎兄...看了你的文!!終於大功告成...呼..謝啦!!

    回覆刪除
  28. 你好~~~
    我依照你的教學成功在標籤列加入獨立的連結位置了!
    不過有一個小問題...
    前面以blogger內建的pages功能所產生的分頁
    點入後可以看到導覽列的按鈕按下
    但自己額外加入的分頁卻顯示不出來

    我自己看不出程式碼該改哪邊~~~

    回覆刪除
  29. To 小葵:看你的部落格應該始改好了。

    回覆刪除
  30. 請問我可以把這篇文章複製到我的部落格嗎?

    回覆刪除
  31. 您好...我做了導覽列...可可能我改了寬度範圍...導致導覽列整個往下掉...怎麼改都回不來...可以幫我看看可以怎麼改嗎?http://kcbslibrary.blogspot.com/ ....謝謝

    回覆刪除
  32. 你的導覽項目太多了,當然就往下掉。

    回覆刪除
  33. 我摸索了許久..

    我看到有人可以寫出整合

    觸控下拉式選單 + 網頁功能

    哦...

    我不知道該如何做修改><

    不知道您是否可以提供幫助..

    話說大頭貼+編號我後來用出來了

    感謝你

    回覆刪除
  34. 你好~ 可以幫我看一下嗎
    http://buyleothan.blogspot.com/
    最右邊的按鈕已經是下拉式選單了
    可是有二個問題
    1.背景顏色..不太對..
    2.整體表格會跟著變=口=

    我該怎做 感謝你.

    回覆刪除
  35. 你可以詢問作者,另外你說的功能我也不知你在哪裡看到的,沒法幫上忙。

    回覆刪除
  36. 請問到目前仍沒有第二層的設計嗎?那第一層的十頁設計意義何在?
    例如:About Me
    點下去只能讀一點固定內容而已不是嗎?

    回覆刪除
  37. 以我自己而言,這樣的導覽列已夠使用,更何況這是一個部落格的設計,而非專業網頁,我想Google Blogger應該是不會提供多層的設計,多層的設計都是靠網路上的Hacks提供,至於About的內容多寡應該是由作者決定,可長可短。

    回覆刪除
  38. 謝謝回覆!Nice!我以為Blogger會提昇至專業網頁的功能.1)可否多說些什麼是Hacks呢?我不太懂~2)可否幫我看一下,我的部落格好像可以多層設計,我已寫好下拉式選單?但我不知除了用標籤以外,如何做如何寫HTML才能讓它實際連到那些內容?因我是完全外行,如果能告的話,可否請綸太郎僅量簡單講或給我懶人包*V*即可http://share2011.uuu.to/

    回覆刪除
  39. 我不會寫網站的程式,至於Hacks有很多,可至
    Google尋找,因為新版後就沒有再follow Hacks的資訊,因為語法都不一樣了。

    回覆刪除
  40. 請問我的BLOGGER裡新增網頁元素,新增小工具---網頁
    是無法新增的~
    但我真的都沒有用網頁工具

    怎樣用都用不出來
    不知道是否是哪裡的問題呢?

    謝謝大大幫忙^^

    回覆刪除
  41. 可以給我你的網址嗎?如果語法裡
    b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'
    裡面是no,改成yes應該會出來 或是你沒有這行敘述可能就沒有這工具

    回覆刪除
  42. 我是新手﹐不好意思!我看了你的教學大半天﹐都找不到語法篇在哪裡?

    回覆刪除
  43. "語法篇",你是說這篇文章嗎?不懂你的意思?
    淺藍色框框裏面的都是相關語法

    回覆刪除
  44. 不好意思,我想請教您,如果單單只要更改靜態網頁(pages)的文章字體大小,CSS語法應該怎麼寫?

    .pages {

    font-size:20pt;

    }
    我試了上述語法,但字體都不會改變,請問我是不是哪裡寫錯了?

    回覆刪除
    回覆
    1. 應該不用改到CSS,到後台進入範本→自訂→進階→改標籤文字→裡面的文字大小即可

      刪除
  45. 想請問一下,有沒有辦法將標籤的分類,放到像網頁那樣的位置呢?
    比如說 旅行是一個分類,然後要放到 關於我 (右邊)的那個位置
    謝謝
    (不知道你有沒有聽懂)
    有點像是你的 文章索引(即時) 的那個部分的設定方式

    回覆刪除
    回覆
    1. 可以啊,用最傳統的方式,將你的分類的網址複製起來,然後在版面配置→網頁區塊的部分,新增外部連結,填入分類的名稱,再將之前複製的網址貼上即可,一個一分類新增即可。

      刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能