一. 版面配置-> 修改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
沒有留言:
張貼留言