Bloggerのモバイル（スマホ）トップページにもAdSenseを設置する方法

Bloggerのモバイル（スマホ）トップページにもAdSenseを設置してみた。

参考サイト：1983Note



モバイルトップページのブログタイトル下にAdSenseを設置する方法


Blogger管理画面のテンプレートのHTML編集へ。


HTMLコードの中のどこかをクリックして、

Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこに、b:includable id='mobile-main' var='top'と入力する。

その下に

<!-- posts -->
<div class='blog-posts hfeed'>
 <b:include data='top' name='status-message'/>
 <b:if cond='data:blog.pageType == "index"'>

上記のようなコードがあるので、その真下にAdSenseコードを貼りつければいい。

AdSenseコードは

HTML2TEXTでコードを変換させて（空白変換なしにして）貼り付ける。

AdSenseの下に線を引きたかったので、

自分は、AdSenseコードの下に

<hr color='#D3D3D3' size='1' width='340'/>

上記のコードを追加した。線の色はグレー。

モバイルトップページと個別記事ページの”ウェブバージョンを表示”上にAdSenseを設置する方法

Blogger管理画面のテンプレートのHTML編集へ。

HTMLコードの中のどこかをクリックして、

Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこに、div class='mobile-link-button' id='blog-pager-home-link'と入力する。


div class='mobile-link-button' id='blog-pager-home-linkの場所がわかるので、

<div class='mobile-link-button' id=\'blog-pager-home-link'>
 <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

上記のコードの真下に、

HTML2TEXTでコードを変換させた（空白変換なしにして）

AdSenseコードを貼り付ける。

AdSenseの上に”スポンサーリンク”を表示する場合は、

<span style='color:#666;margin-bottom:5px;'>スポンサーリンク</span><br/>

上記のコードをAdSenseコードの上につける。

上記のコードの”スポンサーリンク”を消して、全角スペースにすると、

ホームのリンクボタンとAdSenseとの間に一行空けることができた。

自分はCSSのデザインをいじることができないので、

邪道だと思うけど、上記の方法で、

ホームのリンクボタンとAdSenseとの間に一行空けて、

AdSenseを表示することにした。

スポンサーリンク