カテゴリー・サーチをナビゲーション・バー風に配置する |Blogger|

昨日は、Blogger に擬似的なカテゴリー・サーチを置く方法について書いた。今日は、昨日のサーチ・フォームをナビゲーション・バー的に配置する方法を書いてみる。

Blogger でブログを公開している人達には、ページの一番上に Blogger Navbar というナビゲーション・バーがつく。ここには、本家 Blogger へのリンクや、他のブロガーの人へのランダム・リンクなどが表示されている。この NavBar の最大の売りは、何と言っても Google を使った自ブログへのサーチ・フォームだろう (別に大した事はしていないけど、シンプルなのがよいね)。

やりたい事は、「NavBar にカテゴリー・サーチを追加する」という事。具体的には、次のようなフォームをNavBar に入れたい。

Category Blogger ChangeLog メモ GNU Emacs Google HTML & CSS TeX & LaTeX

そこで、色々と調べてみたのだけれど、NavBar は (今の所) ページ生成時に自動で入れられてしまい、ブログ作成者がいじる事はできないみたい。仕方がないので、方針変更。NavBar と同じスタイルの新 NavBar を追加する形にしてみた。どんな形になるかというと、このページの上にその「新 NavBar」が出ていると思うので、それを見て下さい。

このページの新 NavBar は、Templete の <div id="wrap"> に以下のコードを加える事で実現している。

<div id="wrap">
<div id="b2-navbar">
<form method="GET" action="http://www.google.com/search">
  <select id="b2-query" name="q" size="1">
    <option selected="selected" value="">Category</option>
    <option value="intitle:Blogger">Blogger</option>
    <option value="intitle:&quot;ChangeLogメモ&quot;">ChangeLog メモ</option>
    <option value="intitle:Emacs">GNU Emacs</option>
    <option value="intitle:Google">Google</option>
    <option value="intitle:HTML | intitle:CSS">HTML &amp; CSS</option>
    <option value="intitle:TeX | intitle:LaTeX">TeX &amp; LaTeX</option>
  </select>
  <input type="hidden" name="sitesearch" value="at-aka.blogspot.com" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="hidden" name="hl" value="ja" />
  <input type="image" src="http://www.blogger.com/img/navbar/1/btn_search.gif" alt="Search" value="Search" id="b2-searchbtn" title="Search this blog by Category with Google" />
</form>
</div>
<!-- #wrap - for centering -->

あと、Blue タイプの CSS を、Templete の CSS 設定部分に加える。

/* ---( navigation bar 2 )--- */
#b2-navbar 
  {
    background:#036;
    border-bottom:1px solid #024;
    color:#47a;
  }

#b2-search 
  {
    background:#147 url("http://www.blogger.com/css/img/navbar/1/corner.gif") no-repeat left bottom;
  }

#b2-query 
  {
    border:1px solid #47a;
  }

まだ、Google にうちの Blog がスキャンされてないので、カテゴリー・サーチはほとんど使えない。でも、見た目はマトモになったでしょ。

P.S. NavBar の編集方法を知っている方、いらっしゃいましたら教えて下さい。