如何於Blogger增加部落格導覽列選單頁籤： Blog語法研究室

https://blogger-script-study.blogspot.com/2009/08/setup-browser-menu-for-blogger.html

製作導覽列選單或頁籤，相信是很多部落客想要的功能，因為好的導覽列選單可以讓使用者更方便的瀏覽你的網站，增加其停留在你網站的時間，並減少網頁的跳出率，但是 Blogger 的標準板型裡並不提供導覽列選單，由國外下載的板型又不見得符合自己的需要，所以這篇我們就來研究看看如何在 Blogger 的標準板型中增加導覽列選單/頁籤。

寫在前面

本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
更改 Blogger 的板型(template)前，請記得每次先備份自己的【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。

更改板型－新增導覽列選單或頁籤

修改前的板型	修改後的板型(出現導覽列選單了)

1. 打開 Bolgger 板型之後，先找到【/* Variable definitions】，然後新增兩組顏色常數定義。這是為了方便以後我們想要更改側邊欄標題顏色時，只要來這邊更改即可。

第一組變數定義「導覽列選單的字型樣式」(變數名稱：menufont)。
第二組變數定義「導覽列選單的背景顏色」(變數名稱：colormenubackground)。
第三組變數定義「導覽列選單滑鼠滑到時背景顏色」(變數名稱：colormenubackgroundhover)。
第四組變數定義「導覽列選單字型顏色」(變數名稱：colormenutext)。
第五組變數定義「導覽列選單滑鼠滑到時字型顏色」(變數名稱：colormenutexthover)。

▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。

程式碼

/* Variable definitions
   ====================
   <Variable name="sidebartitlecolor" description="SideBar Title Color"
             type="color" default="#FFFFFF" value="#FFFFFF">

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。

程式碼

/* Variable definitions
====================
<Variable name="menufont" description="Menu Text Color"
type="font" default="normal bold 100% 標楷體,Arial", value="normal bold 100% 標楷體,Arial">

<Variable name="colormenubackground" description="Menu Background Color"
type="color" default="#B8A80D" value="#B8A80D"> /* 導覽列選單背景顏色 */

<Variable name="colormenubackgroundhover" description="Menu Background Color While mouse on it"
type="color" default="#80B0DA" value="#80B0DA"> /* 導覽列選單滑鼠滑到時背景顏色 */

<Variable name="colormenutext" description="Menu text Color"
type="color" default="#FFFFF" value="#FFFFFF"> /* 導覽列選單字型顏色 */

<Variable name="colormenutexthover" description="Mouse on Menu text Color"
type="color" default="#0000CF" value="#0000CF"> /* 導覽列選單滑鼠滑到時字型顏色 */

2. 再用搜尋功能找到【body {】，要在【body {…}】之後定義選單的的樣式。

第一組變數定義「導覽列選單的背景顏色」(變數名稱：colormenubackground)。
第二組變數定義「導覽列選單滑鼠滑到時背景顏色」(變數名稱：colormenubackgroundhover)。
第三組變數定義「導覽列選單字型顏色」(變數名稱：colormenutext)。
第二組變數定義「導覽列選單滑鼠滑到時字型顏色」(變數名稱：colormenutexthover)。

▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。

程式碼	body { margin:0px; padding:0px; background:$bgcolor; color:$textcolor; font-size: small; } #outer-wrapper { font:$bodyfont; }

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。

程式碼

body {
margin:0px;
padding:0px;
background:$bgcolor;
color:$textcolor;
font-size: small;
}

/* === Menu start === */
#menu {
    width: 66%; /* The value shall be same as main-wrapper */
    height: 40px; /* 導覽列選單的方塊高度 */
    margin: 0 auto;
    float: right; /* 將導覽列選單定位靠右，如果沒有設定會造成選單不能定位 */
    margin-top: -10px; /* 定義導覽列選單距離部落格標題的上下位置，可以試著調整看看，-50px應該會放到部落格標題裡面吧! */
}

#menu ul {
    margin: 0;
    list-style: none; /* 沒有清單前置符號 */
    line-height: normal;
}

#menu li {
display: inline;
}

#menu a { /* 定義導覽列選單的樣式 */
    display: block;
    float: left;
    height: 20px;
    padding: 5px 15px 5px 15px; /* 文字在導覽列選單中的位置 */
    text-transform: uppercase; /* 自動轉換為大寫英文 */
    text-decoration: none;
    font: $menufont; /* 設定字型樣式參考 menufont */
    margin-top: 5px; /* 定義上方物件的距離 */
    margin-left: 3px; /* menu item 間的間隙 */
    color: $colormenutext; /* 主選單的文字顏色 */
    background:$colormenubackground; /* 主選單的背景顏色 */
    -moz-border-radius: 5px; /* Radius corner for Firefox only */
    -webkit-border-radius: 5px; /* Radius corner for Safari and Chrome only */

}

#menu a:hover { /* 當mouse移到選單項目連結時的文字及背景樣式 */
    text-decoration: underline; /* 定義導覽列字形會出現底線 */
    color: $colormenutexthover;
    background: $colormenubackgroundhover;
}

#menu .first a { /* 定義第一個選單項目的樣式 */
background:$colormenubackground; /* 導覽列選單的背景顏色 */
}
/* === Menu end === */

#outer-wrapper {
font:$bodyfont;
}

3. 第三步驟，利用搜尋功能找到第一個【</b:section>】，然後在</b:section> 及 </div> 之間後新增一段程式碼。這段程式碼就是想要出現在導覽列選單上的選單文字。

假設導覽列選單的項目為：

這裡只要使用 UL 及 LI 指令即可。其他的樣式多已經在第二步驟定義好了。
程式碼中的【#輸入網址位置】必須輸入真正的相對應的網址位置。
程式碼中的 Title=’…’ 內可以填入更多想要讓讀者知道的資訊，這些資訊會在滑鼠滑到其上方時出現。

▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。

程式碼	</b:includable> </b:widget> </b:section> </div> <div id='content-wrapper'>

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。

程式碼

</b:includable>
</b:widget>
</b:section>

<div id='menu'>
    <ul>
        <li><a href='#輸入網址位置' title='部落格最新文章'>最新文章</a></li>
        <li><a href='#輸入網址位置' title='可以留言和我交換連結'>交換連結</a></li>
        <li><a href='#輸入網址位置' title='可以多了解我一點'>想認識我</a></li>
    </ul>
</div>

</div>
<div id='content-wrapper'>

▼這是板型修改後的成果。