こんな感じにしたいのです

下記のブログのように、トップ画像の下に
リンクバーのようなものをつけたいのです。
（下記のサイトのピンクのバーです）
おわかりになる方、教えてください。

初級者のあたしにもできた方法を回答しますね。

あたしもトップの画像の下に横メニューを挿入しました。
これ見てください。↓


テキストリンクになっていますが画像にリンクを貼ることもできますョ。

まずは
管理画面→デザイン設定→カスタマイズ
で、
スタイルシート（ＣＳＳ）が表示されています。
ここの中にトップの画像やら説明文をあらわすところの下に
#bannermenu{

   width:○○px;

}
と、入れます。
○○は任意の数字。
ちなみにあたしはトップの画像と幅を合わせたかったのでトップ画像の横幅と同じ数字です。

入れる場所は
#subbanner a:visited{○○○}
#subbanner a:active{}
#subbanner a:hover{○○○}
の下になりましたが、デザインにより多少違うかもしれません。

次に4枚のＨＴＭＬ(トップページ 、個別記事ページ、カテゴリアーカイブ、月別アーカイブです)の

<div id="banner">～</div>のすぐ下に

<div id="bannermenu">○○○</div>
↑
これを入れます。

○○○にはリンクを。

・示されたサイトのようにテーブル。
・あたしのようなテキストリンク。
・画像にリンク。

実験しましたがすべてイケました。
がんばってくださーい(￣∇￣)ノ

どこまで説明したらいいのか悩むところですが･･･
サイトを拝見しましたところ、テーブルを使ってレイアウトされているようです。

画像を用意します。

左側の角丸と右側の角丸の画像各一枚。
コンテンツに応じたメニュー画像（アイコン）を用意します。
その際、仕切り棒（勝手に呼んでます）も画像として入れておきます。
例えば、

{|TOP|SHOP|BBS|Contact US}

というメニューがあるとします。
TOPのアイコンを作るとき、文字入れのときに「｜」も入れておきます。
以下、|SHOPのアイコン、|BBSのアイコンというように。

あとは
行１、列（メニュー分＋角丸分２つ）の表のセルに、画像を入れていきます。
tableタグに[border="0" cellspacing="0" cellpadding="0"]を追加し、隙間を埋めます。
これで完成。あとはアイコンをアップロードし、挿入したいところに表を入れ、各セルに画像リンクすればOKです。

こういうものはいきなり綺麗に出来るものではないので、
画像の大きさを微調整しながら、頑張ってください。

参考リンクですが、実はIEではきちんと表示されていますが、Operaでは、背景画像が少しずれて表示されています。
おそらく「#bg」に「margin:0 auto;」の指定がないため位置がずれているのではないかと思います。
やりかたは>>1さんの通りで大丈夫ですが、TABLEを使わず、背景画像を分割せずに作る時は、
例えば横767px、縦24pxの両端の角が丸くなった画像を作成（Photshopなどの画像処理ソフトで角丸矩形ツールで描くと作業が楽だと思います）し、それをJPEGなどで保存して、その画像を例えばCSSに

#navi{
 width:767px; height:24px;
 background: url(画像のURL) no-repeat top center;
}
#navi a{
 color: #CCCCCC;/*文字色(適宜調節)*/
 font-size:14px;/*文字サイズ(適宜調節)*/
}

などと記述し、テンプレートのHTML部分の使用する全てに、
「<div id="banner">」から2つめの「</div>」の下に

<div id="navi">
<a href="任意のURL">TOP</a>│<a href="任意のURL">任意のカテゴリ名</a>
（注略）
</div>

などと記述すると、比較的作りやすいのではないかと思います。
各ナビゲーションの横幅を統一させたい場合には、CSSでも可能ですが、TABLEで記述して並べるのが一番簡単だと思います。