Install Search element to TypePad from Google Web Elements
Posted by drikin on 2009年5月27日 16:11
さっき書いたGoogle Web Elementsですが、特にこのCustom Searchが秀逸。設定不要とかもですが、検索結果の出方とか、自分のブログの過去ログ検索は、ホント居方法がないか困ってたので、早速ブログ全体に導入しようと思ったら、TypePadは、ブログタイトル下とかにカスタムモジュールが配置できないっぽい。と一瞬ショックを受けたけど、Custom Searchのソースを見てみると
<!-- Google Custom Search Element -->
<div id="cse" style="width:100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
new google.search.CustomSearchControl().draw('cse');
}, true);
</script>
みたいな感じで、id="cse"を書き換えてるだけ。おれのブログのDescriptionって、ほとんど意味がないからTypeListに上のソースをコピペして
new google.search.CustomSearchControl().draw('cse');
↓
new google.search.CustomSearchControl().draw('banner-description');
に書き換えれば、ごらんの通りすっきり、配置できるじゃん。JavaScript素敵
ちなみに、Descriptionを消したくない人なら、<!-- Google Custom Search Element -->
<div id="cse" style="width:100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
new google.search.CustomSearchControl().draw('cse');
}, true);
</script>
みたいな感じで、id="cse"を書き換えてるだけ。おれのブログのDescriptionって、ほとんど意味がないからTypeListに上のソースをコピペして
new google.search.CustomSearchControl().draw('cse');
↓
new google.search.CustomSearchControl().draw('banner-description');
に書き換えれば、ごらんの通りすっきり、配置できるじゃん。JavaScript素敵
<script type="text/javascript">
var searchObj = document.createElement("div");
searchObj.innerHTML ="<div id=\"cse\" style=\"width:100%;\">Loading</div>";
document.getElementById("banner-description").appendChild(searchObj);
</script>
みたいな感じで、好きなところにターゲットとなるエレメントを増やしておけば、比較的スマートな感じで、好きな場所に検索機能を追加できる。うーん、気分がいいw
#ちなみに、上のscriptは、custom searchのスクリプトより前に入れておくのがよいと思われます。
