2010/10/22

用Blogger 內建的工具, 設定一個水平標籤頁(Tab Menu Bar)




目前Blogger官方提供的模版,很多都有 Tab Menu 的設計. 套用了模版後, 再透過blogger建立網頁, 就能自動加到導覽頁了,還可以滑鼠拖拉的方式調整網頁順序.


要設定水平導覽列,一開始要先新增"網頁"這個小工具.


標題不用填, 先設第一個網頁, 首頁.


導覽列的位置可以隨自己喜好而放, 先放在標頭下吧!


這時回到部落格來看, 就看到首頁的標籤出現了.


接下來, 想新增一個"關於我"的網頁, 到文章-->編輯網頁, 按一下 新網頁.

標題,填入"關於我", 然後再填上內容, 按下 發佈網頁.



回到部落格後, 就可看到關於我的頁籤出現了.


點入關於我,應該就會看到剛剛填的內容.


如果想重新調整頁籤的順序, 可以回到小工具的設定頁面, 在網頁順序裡, 直接拖拉網頁名稱, 就能重新排序了.

相關文章 :

20 comments:

079 提到...

你好,
想請問 水平標籤頁 怎麼做成直接連結?

Skyvee 提到...

您好, 如果要直接加入網址, 可參考這個做法.
http://www.skyvee.net/2007/07/bloggerblogspot-menu-bar.html

:)

079 提到...

skyvee,
謝謝你的快速回覆.
這篇我以前就拜讀過,受益良多.

我原本以為你目前的版上的是使用google內建在自己改成可以放直接連結.
看來我誤會了.
不過還是謝謝你.

順道一提,你的文章對我幫助很多,感謝你.
~ George ~

Skyvee 提到...

George, 呵,原來如此, 也謝謝你的留言. :)

carollsstar 提到...

你好,我看過你分享的那篇可加入直接連結的文章
http://www.skyvee.net/2007/07/bloggerblogspot-menu-bar.html
這個適合新版本的blogger使用嗎?
我跟著做有些新版本沒有, 或者連結不到上面的menu bar
我貼上那些code之後, 是有直接連結, 不過不是menu bar上, 而是其他位置...
我想好像你menu bar的facebook一樣,可以直接連結.
可以指導一下我嗎? 因我不太懂電腦的.
謝謝你.

Skyvee 提到...

您好, 我連到你的blog看過, 您目前的方式 就是直接連結到網頁了,如果您指的是新開網頁,並且離開目前的網頁的話, 那就是您所設定的 連結是 非原來blog的相關頁面, 就可以將原本的頁面換成是新網頁.

匿名 提到...

你好,我現在在blogger的編輯網頁遇到了一個很麻煩的問題,網路上找不到相關的解答,不知道在這裡發問合不合適?
就是在blogger中建立一個新的獨立網頁,在該網頁中置入書籤,也就是 以及的語法,但是現在只要一修改該網頁的內容,該語法就會自動把連結變成我在修改網頁的網址,導致書籤功能失效...,請問有甚麼辦法讓語法不要自動改變嗎?

匿名 提到...

上面提到的語法沒出現,我在下面補一下
<a href="#x1"></a>以及<a name="x1"></a>

Skyvee 提到...

您好, 您指的是像以下的寫法嗎?
<a href="http://www.skyvee.net/2010/10/blogger-tab-menu-bar.html?showComment=1313203715431#c4279898385260103513">書籤</a>




我試過, 應該是不會被覆蓋住原來的內容哩~

匿名 提到...

您好, 我把我blogger語法的變動情形貼上來,
原本正常可運作的情形是:
<a name="XX">目錄</a>
<a href="#XX">(↑回目錄)</a>
這時候點(↑回目錄)可以跳到目錄的地方,
但是我只要跳到撰寫的部分去修改內容再跳回到編輯html那邊就會看到原本的語法變成如下:
<a href="" name="XX">目錄</a>
<a href=http://www.blogger.com/page-edit.g?blogID=6472304938582509929&pageID=6037080213359953190#XX>(↑回目錄)</a>
這樣一來點擊(↑回目錄)就會直接跳到編輯html的那個網頁,
也就是說我不能在撰寫的部分做修改,一修改書籤就變成後來的那個樣子...,可以麻煩您再幫我看看是甚麼原因變成這個樣子的嗎?非常感謝您~

匿名 提到...

您好,我之前有再留一次言,不過不知道為什麼,留言內容不見了,所以我再留言一次,這次我把blogger中的標籤語法的變化貼上來,我試過了兩台不同的電腦,他們都會產生一樣的問題,只要我一跳到撰寫的部分修改文章內容,再跳會修改html時,標籤的語法就會自動改變,導致連結失效,以下是原始有效的標籤語法:
<a name="XX">目錄</a>
<a href="#XX">(↑回目錄)</a>

以下是自動改變後的標籤語法:
<a href="" name="XX">目錄</a>
<a href="http://www.blogger.com/page-edit.g?blogID=6472304938582509929&pageID=6037080213359953190#XX">(↑回目錄)</a>

這問題一直困擾著我,因為我每修改一次文章內容,想要讓標籤功能運作就必須大幅度的把所有語法都修正,希望您能夠播空幫我看一下是不是有甚麼原因導致這種狀況,非常感謝您。

Skyvee 提到...

您好, 留言被blogger放到垃圾留言區了, 剛去撈了出來. 我一直試著重製你的情形, 可是都不會像你出現這種情形呢? 你這個語法是寫在 "網頁"哩吧? 而不是一般的文章?

匿名 提到...

我無法用我的google帳號登入這裡留言,是的...我語法是放在網頁裡,我剛剛新開了一個網頁試著只單純貼入:
<a name="XX">目錄</a>
<a href="#XX">(↑回目錄)</a>
結果一切換到撰寫隨意輸入幾個英文一樣的情形又發生了,語法又自動轉換了...,這證明不是受到其他的語法影響,該不會是設定上的問題吧...這是我發生問題的分頁http://tony200248.blogspot.com/p/blog-page.html

Skyvee 提到...

您好,
你是指切換到 網頁的"撰寫" 編緝網頁後, 該網頁的html語法會出現被加入一些html碼? 你要不要從"修改 html"模式下, 進行網頁編緝? 我剛試過在撰寫模式下修改網頁, 的確會出現你說的情形, 如果切換成html模式就比較不會.
這問題在blogger的確是會發生的, 比較建議, 如果內容會用到些html碼, 就直接進入修改html模式下操作.

匿名 提到...

您好,所以您的意思是只在修改html的模式下進行編寫就可以完全避免這個問題嗎?不過要我完全在html模式下做貼圖以及改一些排版還真的有點困難><,還是謝謝您幫我找出了解決之道,或許我要開一個新網頁來複製html碼到舊的網頁上

十甫寸 提到...

您好,請問可以使用這個標籤頁,搭配之前文章教學的prototype。
來實現點一下出現標籤雲,再點一下標籤雲的功能嗎?謝謝

Skyvee Tsai 提到...

目前是沒辦法這麼用.

Alika 提到...

你好大大, 我試著跟你方法去做,可惜第一步已做不來,不知因何原因在新增小工具裡, "網頁" 顯示是 "已加入"...但我明明沒這樣做過, 我現在可以怎樣做,希望你可以幫幫我, 謝謝!

Skyvee TSAI 提到...

目前blogger的介面更新許多, 如果需要新增網頁, 只要在主頁面裡, 左邊的功能選項中, 選擇"網頁", 再點選新增網頁, step by step, 就能新增完成.

Daniel Chang 提到...

請問
我想要設計水平導覽列後,能夠在每個"主選單"下還可以有"次選單",然後可以將每個文章輕鬆地分類到"次選單"之下
如這個網址一般 http://letstudio.blogspot.tw/

麻煩您回復
感分不盡
daniel

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.