2013年7月5日 星期五

Blogspot三種建立「水平導覽列選單」的方法

https://blogger-script-study.blogspot.com/2013/07/blogspot-menu.html?m=0

Blogspot三種建立「水平導覽列選單」的方法

Google的部落格平台(Blogspot)的版面雖然很陽春,比不上其他市面上的部落格平台,但只要你懂得如利用它所提供的功能,Blogspot也是可以打造出比其他平台更豐富及漂亮版型的,就像今天要介紹給大家的【水平導覽列選單】功能,在其他部落格平台這可是要付費才可以使用的功能,而Blogspot通通免費啦!

其實我在以前的文章已經有介紹過如何在Blogspot建立【水平導覽列選單】了,不過現在似乎已有了些許的不同,所以重新再來整理一下,也算是更新吧!請注意,建立【水平導覽列選單】時必須將小工具放到「網誌文章」上方以及【標頭】下方的全版位置才會有選單的效果

Blogspot在其小工具清單內有三種方法可以建立【水平導覽列選單】,也各有其優點,這三種方法分別是:網頁清單連結清單,下面我把它們的功能及優缺點大致整理出來,方便大家參考與選擇。

建立水平選單方式 網頁 連結清單 清單
建立方法 進Blogspot後台,由側邊欄【網頁】建立。
 
進Blogspot後台,點擊側邊欄【版面設計】,然後點擊【新增小工具】,再選擇【連結清單】建立。 進Blogspot後台,點擊側邊欄【版面設計】,然後點擊【新增小工具】,再,再選擇【清單】建立。
圖示 水平導覽頁-網頁 水平導覽頁-連結清單 水平導覽頁-清單
優點 1.非常容易建立。
2.可以有高亮顯示目前正處在哪個作動頁面。
3.網頁建立在部落格的根目錄下面,有助SEO。
4. 網頁已可以連結到部落格的其他網頁,也可以連結到外部的網頁。
5.可以連結到網誌中的「標籤」搜尋結果網頁
1.可隨意連結到部落格的任何網頁或外部網址。
2.可以選選擇使用字母排序。
3.可以連結到網誌中的「標籤」搜尋結果網頁。
1.可隨意連結到部落格的任何網頁或外部網址。
2.可設定開啟新的視窗或網頁。(適合稍懂html語法者)
3.可以選擇不輸入網址。
4.可以選選擇使用字母排序。
5.可以連結到網誌中的「標籤」搜尋結果網頁
限制 網頁雖然已經可以連接到部落格根目錄以外的網頁,但如果點擊連結到外部的網站頁籤,就會直接離開我們的網站,也就是沒有開啟新頁功能
1.連結外部網頁時,無法設定開啟新視窗,容易流失流量。
2.無高亮顯示目前導覽的頁面。(可解決,但須修改HTML)
3.必須自己輸入網址,有機會輸入錯誤。
1.無高亮顯示目前導覽的頁面。(可解決,但須修改HTML)
2.新增清單的時候操作較複雜,必須自己輸入網址,有機會輸入錯誤。
連結至其他網頁 可以 可以 可以
連結至外部網頁 可以 可以 可以
設定開啟新頁 不行 不行 可以
選單數量限制 沒有限制 沒有限制 沒有限制
頁籤排序 可以,用滑鼠拖曳 可以 可以
Windows Live Writer 支援 NO
(無法離線編輯)
YES YES

以下是工作熊的個人心得:

  • 如果是不太懂HTML語法,又想要有選單高亮度顯示,或是選單中沒有連結到外部網站的朋友,就直接使用【網頁】來建立水平導覽選單就可以了,因為最簡單。但日後的【網頁】內容更新都得進到Blogspot的後台修改。
  • 如果水平導覽選單中有已經發表整理好的文章,或是想要將「標籤」的搜尋結果頁面放在選單中,目前三種小工具都可以符合要求了,以前只有【清單】及【連結清單】可以使用。
  • 如果水平導覽選單中需要連結到外部網站,而且又希望使用「開啟新頁」來連結,那就只能選擇【清單】小工具了。如果不在意一定得使用「開啟新頁」,那麼三種小工具都可以達成。


延伸閱讀:
擁抱Blogspot的新範本板型
用Blogger的「連結清單」建立「水平導覽列選單」
用Blogger的「網頁」清單建立「導覽列」

1 則留言:

Ken Lo 提到...

補充以網頁建立水平選單的方法:
其實也不是完全不能夠設定開啟新的視窗 (是自己在 HTML 版面新加的,而在後台直接新增網頁或連結那些是不能夠),但需要在 HTML 版面新增。

以下作法為:設定開啟新的視窗、新增圖片

https://lh6.googleusercontent.com/-LTuOLVM-iK8/UdZoWnxnaTI/AAAAAAAAIzM/gIUJftCitTc/w418-h170-no/%25E6%2593%25B7%25E5%258F%2596.JPG

效果可以看看我的網站 (konedreamhouse.blogspot.com) 的:
推薦 Google Chrome 瀏覽器