撰寫 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##
/*- 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>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
再到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>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>
參考文獻：
http://joshnote.blogspot.com/2007/01/label.html
沒有留言:
張貼留言