v Blogger Pages分頁功能讓您輕鬆有個導覽列 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...