Bloggerのトップページの任意の場所にセクション(ガジェット)を追加する方法

Google Bloggerのトップページにセクション(ガジェット)を追加する方法

Bloggerのトップページのみにセクションを追加するには、条件式で記述します。

Bloggerのトップページのみにセクションを表示させる条件式

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ここにセクション
</b:if>

例:Bloggerの任意の場所にHTML/Javascriptガジェットを表示させるユニット

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='ここにCSSのクラス名' id='パーツを表示させる場所のid' showaddelement='yes'>
ここにウィジエット
<b:widget id='HTML1' locked='false' title='HTMLとJavasctiptのウィジエット' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</b:if>

<b:section>のIDは、任意のIDで作成します。

サンプルソースコード

bloggerサンプルソースコード

今回は、投稿記事のカラムの直下に記述しました。

サンプルレイアウト

bloggerサンプルレイアウト

これで、ブログの投稿画面の上に新しいセクションを作成し、自由にガジェットを追加できるようになりました。

サンプルhtml

bloggerサンプルHTML

記事の上に新しいガジェットが表示されました。
トップページのみに配置するという条件式を書かなければ、どのページにも任意の場所に任意のガジェットを表示することが可能です。

イベントやアドセンスやアマゾンアソシエイト広告などのバナー広告を頻繁に交換される方にもおすすめです。

アーカイブ(ここをタップすると開きます)

もっと見る

このブログの人気の投稿

硬い木、強い樹木のリスト(日本・世界)

Ubuntu初回起動時にWi-Fiが繋がらないというより選択肢が出てこない問題への対処法

【解決】AcerのAspireノートPCでBiosにF2で入る方法が完璧にわかった!

【挑戦】USBメモリー又はSDカードにUbuntuをインストールする方法

【解決】ランダムなハードウェアアドレスをオンにすると家庭用のwifiに繋がらなくなる(Windows10の話)

Package Name(パッケージ名)の決め方 - Android Studio プログラミング

デロンギのオイルヒーターを使ってみた!風呂場のヒートショックの予防策

時間をかけて作ったページがSearch Consoleのインデックスカバレッジで除外されている件について

Android Studio 3.3でメモ帳を作ってみた!初めてのプログラミング

BEAU SOLEIL(ボーソレイユ)スイスの名門寄宿学校