2009年8月24日 星期一

如何於Blogger增加部落格導覽列選單頁籤

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

寫在前面

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

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

修改前的板型 修改後的板型(出現導覽列選單了)
Blogger-browse-menu-original Blogger-browse-menu-create0


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 name="sidebartitlebgcolor" description="SideBar Title Background Color"
             type="color" default="#B8A80D" value="#B8A80D">

   <Variable name="textcolor" description="Text Color"
             type="color" default="#000" value="#000000">

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

/* 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"> /* 導覽列選單滑鼠滑到時字型顏色 */

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

   <Variable name="sidebartitlebgcolor" description="SideBar Title Background Color"
             type="color" default="#B8A80D" value="#B8A80D">

   <Variable name="textcolor" description="Text Color"
             type="color" default="#000" value="#000000">


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> 之間後新增一段程式碼。這段程式碼就是想要出現在導覽列選單上的選單文字。

假設導覽列選單的項目為：
   Blogger-browse-menu-create02 

  • 這裡只要使用 UL 及 LI 指令即可。其他的樣式多已經在第二步驟定義好了。
  • 程式碼中的【#輸入網址位置】 必須輸入真正的相對應的網址位置。
  • 程式碼中的 Title=’…’ 內可以填入更多想要讓讀者知道的資訊，這些資訊會在滑鼠滑到其上方時出現。
▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。
程式碼

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

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

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

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

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

▼這是板型修改後的成果。  
Blogger-browse-menu-create0

回到 Blogger 部落格技巧總整理

2 則留言:

  1. 老皮2009年10月5日 下午2:08

    想請問一下這導覽列好像都是方塊的型式，如果想要用自製的圖片來做導覽列，我要怎麼把圖片放進去?
    就像這個網站一樣：http://ice2006.pixnet.net/blog
    感謝你的幫忙囉~

    回覆刪除
  2. 工作熊2009年10月7日 晚上8:40

    Enjor Life;
    只要使用 ulr(picture_address) 就可以了，其中的 picture_address 要輸入圖片的網址，自己查一下書或是網路上的方法，對不起現在非常忙無法詳細回答你的問題。

    回覆刪除