凝ったのを紹介しているサイトもありますが、比較的簡単なものを紹介。
色などのカスタマイズが可能です。
２つの工程からなっているので、順にやっていきましょう。
ガジェットの追加
レイアウト→ヘッダーの下の「ガジェットを追加」から「HTML/JavaScript の設定」を選び、以下のテキストを貼り付けます。
<div id='cssmenu'>
<ul>
<li><a href='#'><span>ホーム</span></a></li>
<li><a href='#'><span>プロフィール</span></a></li>
<li><a href='#'><span>サイトマップ</span></a></li>
<li><a href='#'><span>お問い合わせ</span></a></li>
</ul>
</div>
オレンジ色の部分を自分のブログのURLに置き換えてください。
そばにあるテキストがリンクとして表示される文字列です。こちらも自由に書き換えてください。
※以下の部分を増やせば、メニューの項目を増やすことができます。
<li><a href='#'><span>◯◯◯</span></a></li>
※ページ→新しいページと進めば記事とは別のページが作成できます。
<li>の代わりに
<li class='active '>を書くとそのボタンをずっとマウスオーバー時と同じようにできます。
CSSの追加
次にテンプレート→カスタマイズ→アドバンス→CSSの追加に以下のテキストを貼り付けます。初期設定では僕のブログと同じデザインです。数値の対応先を書いてあるので、カスタマイズ可能です。
/*CSSによるメニューバー*/
#cssmenu ul {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:50px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:2px solid #000;
margin:0;
padding:0;
}
#cssmenu li {
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a {
float:left;
color:#f3f3f3;
font-size: 18px;/*文字サイズ*/
text-decoration:none;
height:23px;/*メニューの高さ*/
font-weight:normal;
}
#cssmenu li a:hover,
#cssmenu .active {
color:#000;
background:url(images/bg.png) repeat-x top left;
text-decoration:none;
}
#cssmenu .active a {
color:#fff;/*アクティブ文字色*/
font-weight:500;/*アクティブのフォントの太さ*/
}
#cssmenu ul{
background-color:#2a2a2a;/*バックグラウンド*/
}
#cssmenu li a:hover,
#cssmenu li.active {
background-color:#f08000;/*アクティブ時*/
なお、メニューバーの角を丸めたい場合は、
<Variable name="tab.first.border.radiusなどで検索（ctrl＋F）し、以下の２行を探し出し、オレンジ色の部分２箇所を好きな数値にしてください。２つの数字は同じ値でなければなりません。
数字が大きいほどより丸くなります。
<Variable name="tab.first.border.radius" description="First Tab Border Radius" type="length" default="10px" value="10px"/>
<Variable name="tabs.border.radius" description="Tabs Border Radius" type="length" default="0" value="10px"/>
参考
サイトマップのリンク先は以下のサイトを参考に作りました。http://www.kuribo.info/2012/04/blogger.html