Blogger:Navbarの検索ボックスを、疑似的に再現したHTMLガジェットを作成

イントロダクション

「Blogger:Navbarの検索ボックスはいかにして検索動作を実現しているのか？」では、Blogger の Navbar にある検索ボックスの動作原理について調べてみました。

すると、意外にも簡単に同じ動作する要素を自作できそうに思えてきました。
そこで、HTML/JavaScript ガジェットを使用して、Bloggerのブログ内検索を実現する機能を実現してみました。

HTML/JavaScript ガジェットを使用して、Bloggerのブログ内検索を実現する機能

まずは、Blogger の設定のレイアウトより、新しいHTML/JavaScript ガジェットを追加します。


新しいHTML/JavaScript ガジェットの設定では、以下のデータを入力します。

現在表示しているブログを検索する場合：

タイトル
このブログを検索

コンテンツ
<form id="searchthis_gadget" action="/search" method="get">

<input type="text" name="q" style="width: 120px" title="検索" />

<a onclick="document.getElementById('searchthis_gadget').submit();" title="このブログを検索" style="cursor: pointer;">検索！</a>

</form>

検索するブログを明示的に指定する場合：

検索するブログを明示的に指定することもできます。

(検索するブログのドメイン) の部分に、明示的に検索したいブログのドメインを入力してください。

例：upa-pc.blogspot.com

タイトル
このブログを検索

コンテンツ
<form id="searchthis_gadget" action="http://(検索するブログのドメイン)/search" method="get">

<input type="text" name="q" style="width: 120px" title="検索" />

<a onclick="document.getElementById('searchthis_gadget').submit();" title="このブログを検索" style="cursor: pointer;">検索！</a>

</form>

Blogger:HTML/JavaScript ガジェットの設定
独自の検索ボックスを作成する

「保存」を実行し、レイアウト画面の「配置を保存」を実行します。

すると、ブログの画面に、今作成した次のような検索ボックスが表示されます。

このブログを検索
今回作成した独自の検索ボックス

この検索ボックスに実際に検索したいキーワードを入力して検索を実行（エンターキーを押す、検索！を押すなど）すると、Blogger の Navbar の検索ボックスを使用した時と同じように、検索ページが表示されて、検索結果の一覧が表示されます。


このように、Navbarの検索ボックスを、疑似的に再現したガジェットを簡単に作成できました。

まとめ

Blogger の Navbar の検索ボックスと同じように動作する、HTML/JavaScript ガジェットを作成することが出来ました。

これで、Blogger の Navbar の表示をオフにしたとしても、同じような検索機能は引き続き閲覧者へ提供することができます。