我的工作日記: [教學] 如何用 CSS 在 Blogger 作分頁

From : Polin Wei
　　撰寫 Blogger 以來，總覺覺得缺少了什麼，直到看到別的網頁中的標題下都有分頁，知道那是CSS (Cascading Style Sheets) 的功能，但卻不知該如何在 Blogger 上使用，因此上網查了一下，其實要作到這樣的效果真的不難，趁記憶還熱騰騰時做個整理。

大致上有三個步驟：
1.進到 Blogger -> 版面配置 -> 修改HTML，找到這一行

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

將maxwidgets改為2，showaddelement改為yes，即為下行

b:section class='header' id='header' maxwidgets='2' showaddelement='yes'

##CONTINUE##

2.加入CSS
可以先到exploding-boy找喜歡的樣式，為了配合我的頁面，我選擇[Tab MenuJ]為例，先右鍵檢視原始碼
找到下面這一段：

/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

把這段程式碼貼到<head></head>之間

3.回到檢視原始碼的視窗，往下找，會找到下面這一段：

<h2>Tab Menu J</h2>
<div id="tabsJ">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

　　再到Blogger 管理頁面中，版面配置->網頁元素，於標題列加入一個HTML/JavaScript，貼上上述內容，標題可略。這樣就可以了。

　　若你想直接用 Label 作為分頁的選項，則可以新加入一個 Label 的 widget ，然後再到Blogger管理頁面 -> 版面配置 -> 修改HTML　將此 Lable 的 widget 作下面的修改

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

參考文獻：

http://exploding-boy.com/images/cssmenus/menus.html

http://frantles.blogspot.com/2007/02/css-navigation-menu.html

http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html

http://joshnote.blogspot.com/2007/01/label.html