在 Blogger 加水平連結導覽列

1. 版面配置→修改HTML，不用展開小裝置範本，在 #header-wrapper 加入以下程式碼

/* 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 { 就是滑鼠停在上面的顏色設定
這些你都可以自行修改成你要的色彩也可以加上背景圖片。



<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>


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

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

<li><a href='網址' target='_blank'>網站名稱</a></li>


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


文章引用:在部落格名稱下方放個水平連結導覽列