在部落格名稱下方放個水平連結導覽列

Google Blogger官方的模板通常非常的簡單，簡單到很多人不想加入這塊園地，但是真的有心要擁有一個獨特且有自己風格的版面，還是以Blogger為優先考慮，因為它的可創造性非常強，接下來綸太郎會慢慢介紹這個系列的文章，最主要是現在網路上的模板在Google的大力整頓下出現了許多不合用的情形，雖然設計許多非常漂亮且多功能性的模板，但是要入手修改的東西真的非常多，我自己都改得都非常辛苦，遑論是剛加入的新手，而且很多模版我要的只是某一項功能，並非全部，如果有耐心的話還是可以用官方模板創造屬於自己的模板，不僅獨特且適合自己的需要，也不怕Google Blogger的模板更新，都可以無障礙的套用。

首先要介紹的是連結列(Menu Bar)，大部分是稱為Menu功能列或是導覽條，在WordPress是稱為分頁，類似文章最上方的圖形，讓你製作一個超連結，連向你想連結的網站或頁面。

以下範例是套用官方模板的Stretch Denim(中間這個)，這是個兩欄式的模板，


套用後展示如下，一個很單純的兩欄式模版，適合1024*768版面，記得模板上有註明"Stretch"的，就是寬型的版面，適合1024*768解析度，我的另一個網站東京封印，就是套用此模板修改的。


首先一樣是備份的你模板，然後版面配置→修改HTML，不用展開小裝置範本，然後加入以下連結列的CSS外觀語法，將這段語法放在header區下方即可。

我將連結列的外觀定義為Meun區，

/* Menu */
#menu {
margin: 0 2%;
height: 26px;
padding-top: 10px;
background: #5F5F5F;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin-left: 5px;
padding: 1px 10px;
text-decoration: none;
font-size: 8pt;
color: #fefefe;
}
#menu a:hover {
text-decoration: none;
color: #Fefefe;
background: #789CFF;
height: 24px;
}
#menu .active a {
}


以上就是連結列的外觀定義，其中
#menu {
margin: 0 2%;
height: 26px;
padding-top: 10px;
background: #5F5F5F;
}
裡的margin:0 2%;設定最好和你的#header及content-wrapper 一樣，才不會產生左右不對齊
height:26px;就是連結列的高度，background是連結列的背景顏色
而#menu a { 就是連結文字的顏色設定
#menu a:hover { 就是滑鼠停在上面的顏色設定
這些你都可以自行修改成你要的色彩也可以加上背景圖片。

設好了連結列的外觀設定後，當然就是要把這個東西放到你的版面上，通常我們會放在部落格標題(header-wrapper)與主文(content-wrapper)間，所以就要找到這個區塊的html語法，然後將以下的程式碼放入即可，

<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://tokyoplay.blogspot.com/2008/04/tokyo-seals.html'>關於</a></li>
<li><a href='網址' target='_blank'>網站名稱</a></li>
<li><a href='網址' target='_blank'>網站名稱</a></li>
</ul>
</div>

找到header-wrapper這個區塊，如下圖，在標頭區<div id='header-wrapper>及內容區<div id='content-wrapper'>中間插入上面的語法即可。

其中Home就是連回你的主頁，我做一個範例，關於然後放上這篇的網址，這些你自己都可以修改，如果要再增加一個連結，一樣是在</ul>之前新增
<li><a href='網址' target='_blank'>網站名稱</a></li>

即可，如果不要在新視窗開啟，記得把target="_blank"刪除即可。

插入語法前


插入語法後


就會出現如下圖的連結列的。



這樣你的模板就會擁有一個連結列，非常的簡單，這個模版的觀念很簡單，就是先製作你要的元件外觀，以CSS定義，然後找到你要放這個元件的相關位置，再將HTML語法放入即可，最主要就是要放對地方，譬如說你想將連結列放在網站最上方，那你就將HTML語法那段<div id='menu'的區塊語法>放到 <div id='header-wrapper'>這個區塊上方，就會出現以下這種型式，如下圖。


所以這都可以自己調整控制的。

如果想製作一個漂亮的水平連結列Menu可以參考CSS Horizontal Menu 網站的設計，他會列出相關的CSS及HTML程式碼，讓你參考，也可以套用在你的模板上。


如果對模板template的整體配置不清楚者，可以參閱
Blogger template模板教學課程---概說及基本結構