Google Blogger でテンプレートを編集して Zenback を投稿記事の後に表示する

Zenback という有名なブログパーツサービスがあるようです。
僕はさっぱり知りませんでした。
自分の投稿に関連する自分や他人の投稿を表示してくれて
PVの増加に効果があるとのことです。

正直、半信半疑ですが、半自動半強制で他のブログと交流が出来るのは
受け身な僕にはぴったりだと思い追加してみました。

Zenbackであなたのブログに全てのフィードバックを。 -
http://zenback.jp/

0.まずはZenbackに登録してみる

右上の新規登録から登録します。
特に難しい箇所はないので省略します。

登録が完了すると最後にスクリプトコードの取得が出来ますので
これを控えておきます。



1.コードを変換する

 テンプレートを編集して、上記のコードを張付ける場合は
 あらかじめ文字を置換しておく必要があります。

 1-1.
  いちど作業0で取得したコードをメモ帳などに貼り付けて
  下記の通りに文字を置換します。 実体参照というやつです。

   「"」→「"」
   「<」→「&lt;」
   「>」→「&gt;」

   「&」→「&amp;」

 1-2.
  また、記事別で表示された時のみ Zenback の結果一覧を表示させたい場合は
  コードを次のタグで囲みます。
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   Zenback のコード
  </b:if>

  詳しくは下記の記事を参照
  GHP: Blogger:テンプレートを編集して 記事別表示 で表示する項目を選択する

2.Blogger に張付ける
 作業0でコードは取得出来ました。
 次にこのコードをBloggerに埋め込みます。 

 2-1.
  Blogger の編集画面を開きます。
  左側に「テンプレート」の項目があるので選択します。

2-2.
  「ブログで使用中」の下の「HTMLの編集」を押します。

2-3.
  テンプレートが表示されます。
  ごちゃごちゃと訳の解らん英数字が並びます。

  一度、キーボードの「CTRL」 +「A」などで文字を全選択→コピーして
  メモ帳などに張付けておく、バックアップ作業をしておく事を勧めます。


  2-4.
  落ち着いてフォームの文字をどこでも良いのでマウスで選択します。
  キーボードの「CTRL」を押しながら「F」キーを押します。

  すると、右上にSearchと書かれた「検索ボックス」が表示されます。



2-5.
  <data:post.body/>
  ↑この文字をコピーして、「検索ボックス」に張付けて
  キーボードの「Enter」キーを押して
  テンプレートから <data:post.body/> を検索します。

  何度か「Enter」キーを押すと解るのですが
  テンプレートの中には <data:post.body/> が3箇所存在します。

  左の数字を見ながら、先頭から2番目にある
   <data:post.body/>  を探し出します。


   2-6.
   この 2番目の <data:post.body/> の行の真下に
   作業1で取得したコードを張付けます。 
   自分は後で追記箇所が追いやすくなるように <!--  --> で日付をメモしています。
   ソースコード見られると見付かっちゃうので、この辺はお好きなように。


張付け前

張付け後

  2-7.
   張付けが完了したら、ページ上の「テンプレートを保存」を押します。

3.表示を確認する。

  以上で設定は完了です。
  ブログを開いて表示されるかを確認します。


このブログにも無事に表示されるようになりました。

その他.
 なお上記で表示されるのはPC表示の記事のみです。
 モバイルから見た画面で表示させるのは次の記事を参考にして下さい。
 
 GHP:Google Blogger でモバイル テンプレートを編集して Zenback をモバイル表示記事の後に表示する
 

スポンサードリンク

0 件のコメント :

コメントを投稿