2010年5月26日 星期三

用Blogger的「網頁」清單建立「導覽列」

https://blogger-script-study.blogspot.com/2010/05/blogger-pages-create-browse-menu.html

現在起使用 Blogger 也可以輕鬆製作「導覽列」選單了。以前都只能下載別人製作好的範本或自己修改模板語法 (template Html),否則很難製作出導覽列。

導覽列的好處可以讓網友在瀏覽我們的部落格時,快速連結到部落格內的特定網頁,比如說連結到「相簿」、「留言板」、「關於我」…等,我較常用的是連結到一些我已經針對某一主題寫過很多文章的整理文,這樣可以方便讀者找到一個有主題的導覽文,也增加了訪客的停留時間並降低網頁的跳出率。

很多人一開始看到這個「網頁」清單的新功能都搞不清楚是什麼,就算知道了也不會用,我也不例外,後來找了一些資料才知道如何使用。

1. 首先進入 Blogger 的後台的【版面配置】,隨便點選一個可以【新增小工具】的地方。
Blogger_Pages02

2. 開啟「新增小工具」視窗,點選【網頁】。
Blogger_Pages03

3. 會切換到「設定網頁清單」視窗。建議你把「標題(可省略)」】的地方變成空白。一開始只有一個「首頁」指到你的部落格的根部網址你,也可以變更其命名,比如說改成英文【Home】,先按【儲存】。
Blogger_Pages04

4. 回到【版面配置】畫面,如果你的「網頁」小工具不是出現在整頁的最上方,就用拖曳的方式把它拉到整頁的最上方。
Blogger_Pages06

Blogger_Pages05

5. 先按【儲存】,然後按【檢視網頁】,你會發現網頁標題的下方出現一個新的導覽列,也有一個新的導覽選項【首頁】,就是剛剛新增的那個,如果你剛剛把它改名為【Home】,它就會現出【Home】。
Blogger_Pages07

6. 接下來,我們來多增加一個新的導覽選項【關於我】。再進入Blogger後台 (不是編輯小工具喔!),點選【文章】→【編輯網頁】→【新網頁】。
Blogger_pages01  

7. 「網頁標題:」寫【關於我】,內容就自己寫囉!寫好之後按【發佈網頁】。
Blogger_Pages09

8. 點選【檢視網誌】會到部落格首頁,點選【檢視網頁】會到剛剛新增的「關於我」網頁。先點【檢視網誌】。
Blogger_Pages10

9. 【關於我】的導覽列選項已經加上來了。點選看看有什麼變化?可以試看看在【首頁】與【關於我】之間切換看看。請注意其網址沒有加上年月耶,也就是說直接放在部落格的根目錄,一般的部落格發表的文章都會再跟目錄底下在加上年月,自己觀察看看吧。其實如果剛剛編輯網頁的時候先用純英文的標題,如 【About Me】,那麼網址名稱就會是英文的 blog-root/about-me.html 喔參考這一篇主動操控Blogger的網頁檔名有意義化,提昇PageRank

10. 至於導覽列選項的文字字型大小、顏色及背景,就要使用 Blogger 的新【測試區】功能,有機會再說明吧。

回到 Blogger 部落格技巧總整理

27 則留言:

微笑靜靜耀揚 提到...

good ~

thx~

vivi 提到...

謝謝!想問如何像作書籤那頁的分頁,就是可以進去後還可以有一篇一篇的文章那樣?感激~

工作熊 提到...

Vivi;
對不起,不太懂你描述的耶!好像很難的樣子!有網頁可以參考嗎?

GEMINI 提到...

請問如果有一個別的網站的部落格網址<如何把它放入新網頁?並可以正常操作?

工作熊 提到...

GEMINI;
這個我也不會啊!

米米 提到...

HI!版大你好!!多虧了你整理這一篇"用Blogger的「網頁」清單建立「導覽列」",要不然我還真的不知道該怎麼用>"""<!!

米米 提到...

感謝!!(有字數限制O_O?)
但我有個問題想請你解答>""<!!

米米 提到...

像您最上方的頁籤,有一個"工作熊"的頁籤,按下是直接連去別的部落格,請問這要怎麼設定呢??我試了好幾次都是不出來,因為我有兩個部落格想要互連!!麻煩請你解答了!!感謝!!!>"<!!

米米 提到...

抱歉留了好幾篇....>"<!!

工作熊 提到...

米米;
明天會整理一篇相關的文章,用「連結清單」,到時候過來看吧!另外這個網誌的留言可以很長,幾乎沒有字數限制喔!

Cherry 提到...

成功了,感謝

George 提到...

之前一直搞不懂怎麼都只有首頁而已.見了你的說明,整理過後清爽多了,謝謝你.

匿名 提到...

你好_
請問怎樣做到以下BLOG的__文章分類呢??

http://www.blog.photobyben.hk/(好像它_PRE﹣WEDDING,WEDDING DAY 內都有各自的文章_)

試了你教的「網頁清單」。。。但就不能在內加新文章><
我是HTML白痴_請你教教我><

工作熊 提到...

CHIELD B.;
1. 你所說的那個網頁並不是Google 的 Blogspot,所以不能相提並論。
2. 就我的瞭解,目前使用Blogspot的範本是無法達到你所希望的網頁那樣每個分頁都有多篇文章的效果的。
3. 就我的能力所知,你所說得那個網站的效果,應該是自己寫的網頁程式,如想達到那樣的小效果,你必須要自己有的註冊網址,這樣才能擺放你自己的網頁程式。

Unknown 提到...

你好
請問我如何在新網頁內增加文章,並讓它加入我的標籤雲裡阿?就像首頁裡的文章一樣可以一篇一篇的更新。
像這個部落格http://cch1940planet.blogspot.com/
他不只可以在首頁新增文章,還可以再"最新安平釣況"增加文章,而我學你所教的"Blogger的「網頁」清單建立「導覽列」
"就只能寫一篇.....請教教我,謝謝

工作熊 提到...

花獸;
你所說的文章用的方法應該是使用「連結清單」或是「清單」所做出來的效果。可以參考我的另外兩篇文章
用Blogger的「連結清單」建立「水平導覽列選單」

用Blogger的「清單」小工具建立「水平導覽列選單」

至於內容,就是把網址連到搜尋結果的網址就可以了。

小徐親子~手工/美勞/札記 提到...

謝謝分享~

YC 提到...
作者已經移除這則留言。
YC 提到...

謝謝分享!多虧這篇才好不容易才弄出頁籤!

另外有個問題想請教您,
就是我的頁籤都會有個白框,
在範本設計工具的進階中也找不到去除的選項,
試了很久都沒成功,只好來向您尋求幫助!!

希望大大可以給予解答,感激不盡!>___<

附上網址http://poppyfruit.blogspot.tw/

工作熊 提到...

YenChun Liu;
老實說你的版型讓人看了眼睛有點類,你的版型原本應該是使用白色的的底色,不過你硬把它改了底色圖案。
建議你進Blogspot後台的【範本】,選【自訂】來修改CSS。

Ock00926 提到...

你好
請問blogger 的網誌可以改名嗎?

工作熊 提到...

葉祺祺,
進Blogger後台》在側邊攔找到「設定」》「基本」》找到「標題」後面點按「編輯」就可以了。

小錦 提到...

你好
請問我如何在新網頁內增加文章,並讓它加入我的標籤雲裡阿?就像首頁裡的文章一樣可以一篇一篇按照"時間"來更新,最新發佈的文章在最上面
像這個部落格http://san11.wfublog.com/
他不只可以在首頁新增文章,而我學你所教的"Blogger的「網頁」清單建立「導覽列」
"就只能寫一篇.....請教教我,謝謝


工作熊 提到...

小錦,
它基本上用的是「標籤」當連結清單而已,參考這篇文章,把「標籤」當成網址的連結清單就可以了。
http://blogger-script-study.blogspot.tw/2010/09/blogger-linklist-menu.html

小錦 提到...

感謝工作熊大大。我的問題解決了

小錦 提到...

工作熊大大你好,我又有問題要請教您:
http://san11.wfublog.com/
請問以上的網站上,如何將每一天的文章做分隔開來。
我目前做的網頁:
http://www.bastetcj50.com/search/label/%E5%A1%94%E7%BE%85%20%E5%8D%A0%E5%8D%9C
以日期做分隔的話,文章都會連在一起

請問要怎麼把文章分成一篇一篇(按日期分隔開來)?

工作熊 提到...

小錦,
這個需要改動到版型,先去瞭解一下何謂CSS吧!