2009年8月13日 星期四

如何加入一個水平列功能表menu bar在blogspot 標題列下


一. 版面配置-> 修改HTML 每次修改之前, 最好先備份一下模板.
在 #header {..} 之後, 使用絕對位置定位MENU位置,加入以下程式碼
#navmenubar{
TOP: 160PX;
POSITION: absolute:
height:25px;
line-height:23px;
margin:0 1px;
background:#1B90DD;
color:#ffffff;
}

#navmenubar li{
float:left;
list-style-type:none;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #777D85;
border-bottom:1px solid #777D85;
white-space:nowrap;
}

#navmenubar li a{
display:block;
padding:0 10px;
font-size:12px;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navmenubar a {width:1%;}

#navmenubar .selected,#navmenubar a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

二. 在blogger網頁元素(page element) 的 Header及Post加入新增小工具
版面配置-> 修改 html
放大圖...

三. 加入要連結出去的程式碼, 貼上網址, 修改要顯示的文字.
版面配置/網頁元素 JAVA EDIT 貼上連結程式
< div id="navmenubar" >
< li > < a href="http:// c102046.blogspot.com/" >顯示的文字HOME < /a> </li> < /div >

參考文章:
在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar)
http://www.skyvee.net/2007/07/bloggerblogspot-menu-bar.html

沒有留言:

張貼留言