2013/10/18

BloggerのヘッダにAdsense広告を設置する

このページのように、Blogger(ブロガー)でHeader(ヘッダー)の、トップ画像の横にアドセンスの広告ユニットを配置してみます。

まず、レイアウト > (Header)編集 を選択

「ヘッダーの設定」で、画像をコンピュータから取り込みます。
(画像ファイルは、png形式で保存した方が綺麗です)



説明は残したいので、説明を画像の後ろに表示するを選択します。

テンプレート > HTMLの編集 で、

 (*HTMLやCSSを編集する時は、変更前の状態のテキストファイルをメモ帳などで保存しておきましょう。)

795行目あたりに、以下の記載が見つかります。

     <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
ここに追加
        <!--Show the description-->

2箇所の
 style='display: block'
を、削除して

*Google Adsenseから、コードを取得して、そのままでは使えないので、
ペーストする前に文字を変更しておきます。

"    →    &quot;
<    →    &lt;
>    →    &gt; 

Adsenseのコードを変更したら、ここに追加に配置。



*画像と広告のサイズによっては下に落ちる事があるので、そのときは、
テンプレート > カスタマイズ でテンプレートデザイナーを開き 「幅を調整」します。




スポンサードリンク