【Blogger】記事中にアドセンスを表示する方法

・2013/02：Add AdSense right After <!--More--> Tag
・2014/05：Add AdSense Ad right after <!--more--> Tag in Blogger
・2015/12：Blogger da Yazı Ortasına Adsense Reklam Nasıl Eklenir ? - Ehli Blog

上記を参考に導入しました。
導入が成功すれば、記事中の<!--more-->タグの位置にアドセンスが挿入されるようになります。

はてなブログなどでも同じ手法が使われているのですが、jqueryを使って記事中に挿入するという手法を用いています。一旦記事下に配置しておいて、それをjqueryを使用して記事中に挿入するという手法です。

1.記事下にアドセンスコードを追加する
2.jqueryで記事に挿入するコードを追加

この段階を踏めばよいかと思います。
すでに記事下に表示している場合は、あらたに記事下に２つめを追加することになるかと思います。

1.記事下にアドセンスコードを追加する

挿入する位置を調べる

「Ctrl」+「F」キーで検索窓が開くので、<data:post.body/>を入力すると、テンプレートの中を検索できます。数か所あって、どこに挿入したらいいのかわかりにくいかと思います。

<data:post.body/>の後ろに好きなテキストを書いて、記事を表示させてみるのが一番わかりよいかと思います。私は、＠＠＠数字を書きました。


表示させると＠＠＠2の位置が挿入すべき位置だというのが判明します。

コードを挿入する

<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="display:none;">
<div id='MBT-google-ad'>
<center>
ここにアドセンスコード
</center>
</div>
</div>
</b:if>

<data:post.body/>の下に上記のようにコードを挿入します。
「ここにアドセンスコード」のところは、表示用のアドセンスコードを貼り付けてください。

まずは、「ここにアドセンスコード」のままにしておいて、動作確認をした後で、アドセンスコードに置き換えるのもよいかとは思います。

2.jqueryで記事に挿入するコードを追加

<head/>の上に以下のコードを追加します。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
 
<script type='text/javascript'> 
$(document).ready(function(){
$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#MBT-google-ad&#39;).html()); 
$(&#39;#MBT-google-ad&#39;).html(&#39;&#39;);
}); 
</script>

1行目は、jquery本体の読み込みなのですでに読み込んでいる場合は必要ありません。

「#MBT-google-ad」部分が大事で、本記事の最初の部分のコードにも含まれていたかと思います。
#MBT-google-adのDIVをmoreの位置にjqueryをつかって挿入しています。