2023年1月3日火曜日

Blogger Web 検索もしたい 改訂版

Blogger の 検索 ガジェット を模した Web 検索 機能。
Blog に取り込む となると、結構、面倒でした。
思う様にならぬ 状態 から、やっとの事で抜け出し、
ひと先ずは 暫定の域 とは ... おさらば。  ;)


Blogger Web 検索もしたい 暫定版
Blogger Web 検索もしたい 暫定版 要改訂
で書いた様に、
改訂したもの を作る必要があったのですが、
やっと、出来ました。
本年元旦より、訂正してあります。

対策方法 は style="width: ???px;" にする事だと思っていたのですが、
以下に図示する様に、
Browser 毎の解釈での 微妙な差異 は取り除けませんでした。

Template (テーマ html)の介在が 難しくしている 気がしています。





因みに、改定点は 以下の3点です。

・style="width: ???px;"
・table 形式の採用
・input に placeholder 設定

また、
前回はインデントにスペースを使っていましたが、
其のまま の場合、
表示時点で 空白文字ひとつ があるものと解釈され、
レイアウトが崩れる原因になっていた為、
インデント無し で記述しています。
  メモ帳 notepad.exe で書いているので、此の様な結果を招いていますが、
  別の エディタ なら、違うかも知れません。  同じかも。

尚、
Internet 検索すると、
placeholder の使用は 必須 では無いと解説される事もある訳ですが、
利便性を重視し、
入力をガイドさせる事にしたのです。


さて、
コードは こちら 。


<form method="get" action="https://www.google.co.jp/search" target="_blank">
<!-- Not Use Spacing For Indent To Keep Layout -->
<table cellpadding='0' cellspacing='2'>
<tbody>
<tr>
<td>
<input type="text" name="q" style="width: 169;" maxlength="255" value="" placeholder="Song Album Musician">
</td>
<td>
<input type="submit" name="btng" value="検索">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="q" value="YouTube" checked="checked"> Only YouTube
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="hl" value="ja">
</form>



0 件のコメント:

コメントを投稿