Blogger内で完結するカスタム検索をシンプルに書いてみた

検索した結果がBlogger内に表示されるといういたって普通なHTMLコードとスタイルシートの実装。特にたいしたこともないですが、SyntaxHighlighterを設置したので試してみました。

実装はシンプルですし、スタイルシートも検索ボタンが邪魔にならないようになってます。Bloggerのテンプレートなり、HTML/Javascriptガジェットなりにそのまま書けばそのまま使えるのでご自由にどうぞ。あ、CSSのCustomSearchクラスとかちょっと配置弄らないとだめですね。

HTMLコード

<div class='CustomSearch'>
  <div>
    <form accept-charset='utf-8' action='/search' id='searchform' method='get'>
      <input autocomplete='off' id='s' name='q' placeholder=' ブログの記事から検索' size='32' type='text'/>
      <input id='searchsubmit' type='submit' value='検索'/>
    </form>
  </div>
</div> 

CSSコード

.CustomSearch {
  position: absolute;
  bottom: 10px;
  right: 0px
}

.CustomSearch form {
  width: 100% !important;
}

.CustomSearch form input {
  border: 1px solid rgb(195, 195, 195);
}

.CustomSearch form input[type="text"] {
  padding: 0px !important;
  width: 95%;
  background: none repeat scroll 0% rgb(255, 255, 255);
  height: 25px;
  
  /* for IE. */
  line-height: 25px;
}

.CustomSearch form input[type="submit"] {
  border-style: none;
  
  color: rgb(255, 255, 255);
  overflow: hidden;
  text-indent: -9999px;
  
  /* image-size of loupe. */
  width: 20px;
  height: 20px;
  
  margin-left: -26px;
  vertical-align: middle;
  -webkit-appearance: none;
  
  /* loupe. */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAA0lBMVEWpqann5+cGBgbj4+Po6Oji4uK+vr5LS0u8vLzDw8NHR0eRkZFra2tycnIREREuLi4+Pj7f39/19fXAwMAsLCz4+PgCAgJlZWWgoKDCwsLx8fH8/PwICAj5+fmVlZVMTEw1NTWcnJzb29szMzMNDQ3u7u79/f0eHh5CQkIlJSXk5OSsrKytra3W1tbOzs5wcHDPz8+6urooKCiGhobq6ura2trR0dE0NDTQ0NAYGBgFBQWrq6uOjo6BgYFOTk7Nzc3V1dU9PT29vb3h4eEAAAD///8FW2i0AAAAn0lEQVR42nXOxQ4DMQxF0SkzMzMzd5ie//+XuphYqabqXVlHthKFRDFFT/AsMKkiqkHNfGMOKS8eSWcxkejBCFZMPBmXsxGJXhajjSnjBb7AHYjz8Ra4l+jAEXjGgXE4X/DrrsvXmkmMR5wCLDV78vM6VkbHy6NeIYn0WAMoFqyyQK5bpRrQEihrAH07jNQGNj84GAP3MNL2eiOJsn/4AcvuYfZl18C2AAAAAElFTkSuQmCC) no-repeat scroll 50% 50% rgb(255, 255, 255);
}