BloggerAds

2008年7月24日 星期四

[教學] 如何用 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>


<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

沒有留言:

張貼留言