凝ったのを紹介しているサイトもありますが、比較的簡単なものを紹介。
色などのカスタマイズが可能です。


２つの工程からなっているので、順にやっていきましょう。

ガジェットの追加

レイアウト→ヘッダーの下の「ガジェットを追加」から「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