Bloggerにユーチューブの検索ボックスを設置する

YOUTUBEの検索ボックス(サーチボックス)をbloggerブログに設置する際の説明です。

ユーチューブ検索ボックス設置方法。
!このコードを取得するには、グーグル様の無料アカウントを取得し、ログインしている必要があります。

まずこちらののGoogle AJAX Search API (Beta)Video Search Wizardへアクセスします。

以下の簡単ウィザードが表示されます。
Search Expressionには設置したいキーワードを指定します。初期値に入っている英文字キーワードは消去してしまします。


以下のAJAX Search APIコードが表示されるので全てメモ帳等にコピーして貼り付けします。(念の為保存しても良いです)


AJAX Search APIのコードの張り方

まず検索ボックスを表示するタグを探して、WEBページやブログに検索ボックスとして表示させるタグを切り取ります。
以下の<div>〜〜</div>までの記述を任意の場所に貼り付けることでユーチューブ検索ボックスを表示しなさいとすることが出来ます(上から10行目)
<div id="videoControl">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

上記のコードを切り取り出来ましたら
Bloggerのテンプレート編集画面を開き、表示させる位置に貼り付けます。

表示位置は2カラム(メインとサイド)での説明になります。
メインのタイトル直ぐしたに表示させる場合はテンプレートコードの
"<a href="<$BlogURL$>" accesskey="1"><$BlogTitle$></a>"
上記のコードを探し、開業してすぐ下にユーチューブ検索ボックス表示コードを貼り付けします。
例:
<h1 id="banner-header"><a href="<$BlogURL$>" accesskey="1"><$BlogTitle$></a></h1>

<div id="videoControl">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>
サンプルはこちら

もしくは<!-- entry -->と言う記述を探して以下の様に貼り付けます。
<!-- entry -->
<div id="videoControl">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>
サンプルはこちら

検索ボックスを表示するコードを張り間違えても後から修正する事が簡単なので左程気にせず一度試し貼り付けしてみると良いと思います。


次に残りのコードを全てコピーします。
<!-- ++Begin Video Search Control Wizard Generated Code++ -->

中略

<!-- ++Begin Video Search Control Wizard Generated Code++ -->

WEBページやブログhtmlコードの<head>〜〜この間の何処でも良いので貼り付けます〜〜</head>
一番簡単な所では、テンプレートの上から数えて三行目の<head>の直ぐ下を開業して貼り付けます。


以下の様に丸ごと貼り付ければOK


作業が完了出来ましたら、左下にある「テンプレートの変更内容を保存」をクリックして、ページを再構築して作業完了です。

簡単ですが説明は以上です。

ページトップへ戻る

動画ツールの紹介です。取り扱う動画データは必ず自分の所有物動画(ビデオで撮影した動画や、家庭内でビデオ録画した動画を自分で楽しむ目的のみ)であり、決して諸作権を侵害したりしないようにお願い致します。文化庁 | 著作権

注意、YOUTUBEでは動画のダウンロードはサポート外となります。公式動画のダウンロードについて

エンコードや保存の便利ツール

VIDEO search(ビデオ検索)ボックス設置関係