在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar)

推文分享

當部落格成立一段時間後, 文章數量及分類標籤變多, 加入部落格的小工具也增加, 此時對讀者而言, 想找些資訊或文章, 可能會不知從何下手.

可以考慮在標題列下方, 文章上面加入一列的功能選單. 選單就可以設定其他網頁連結,把一些原本放在側邊欄(sidebar)的資訊, 移進來.



這個方法, 對沒有特殊版型的部落客來說, 只要兩個步驟.

不過, 首先要先確定你的樣板是否可以在標題列下加一個網頁元素? 如下圖.


如果不能的話, 請參考這篇文章.新增Blogger Header及Post的網頁元素,可加入圖片或Adsense

記得先備份樣板.

1. 範本--> 修改HTML

在 #header-wrapper {..} 之後, 加入以下程式碼

#navmenubar{
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;
}


如果想改背景色或字體色, 就自己調 background 及color 吧!

2. 然後到 範本 --> 網頁元素

在標題列下, 加入一個新的網頁元素. 加入要連結出去的程式碼.如下圖, 紅字部分是網址, 藍字部分是顯示出來的文字.



或是直接copy下述程式碼, 再自行修改吧!
<div id="navmenubar">
<li><a href="網址">文字</a></li>
</div>

效果像這樣..

創用 CC 授權

本創作適用 姓名標示-相同方式分享 2.5 創用 CC 授權，台灣 並依循所適用的授權條款。

相關文章 :