Bloggerにzenbackを美しく導入する方法

 前のエントリで”デザイン＞ページ要素 でガジェット追加”という手抜き導入を紹介したのですが、

zenbackは記事の個別ページを解析して、関連記事や関連リンクを表示します。
サイドバーにzenbackを貼ると、トップページや月別／カテゴリ別アーカイブページにもzenbackが表示されるようになりますが、この場合、解析がうまくいかず、あまり精度の高くない関連記事や関連リンクが表示される可能性があります。
via: zenbackが使えるブログ／使えないブログ - zenbackブログ

 関連記事の抽出精度が下がっちゃうとのことです。関連記事目的なところもありますので、真面目に導入してみたいと思います。

まず。zenbackからスクリプトコードをもらってきます。

見やすいように改行を入れてます。

<!-- BEGIN ZenBackWidget -->
<script type="text/javascript">
docu～省略～ript%3E"));
</script>
<!-- END ZenBackWidget -->

以下のようにコードを足します。↓

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- BEGIN ZenBackWidget -->
<script type="text/javascript">
// <![CDATA[
docu～省略～ript%3E"));
// ]]>
</script>
<!-- END ZenBackWidget -->
</b:if>

↑（2010/12/02 追記：コレは古いコードです。新しいコードは下の方に有ります）

BloggerのテンプレートはXHTMLなので”CDATA”を書いてやります。if文は、単一記事のページのみ表示する為に追加します。

で、デザイン＞HTMLの編集からテンプレートをいじっていきます。

まず、テンプレートをすべてダウンロードをクリックし、バックアップを取っておきましょう。

次に、以下の部分を探してください。。

（追記：ウィジェットのテンプレートを展開 チェックボックスをオンにしてね

         Divタグがなかったらpost.bodyの直下に自分で追加しちゃってもOK)

<data:post.body/>
<div style='clear: both;'/><!-- clear for photos floats -->

divを分解して、その間に改造済みコードを貼りつけます。

<data:post.body/>
<div style='clear: both;'>
  ここに、さっきのをコピペー
</div><!-- clear for photos floats -->

で、最後に関連記事の精度をより高めるために、専用タグを追加します。（任意）

<div class='post hentry'>
    &lt;!-- zenback_title_begin --&gt;
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>
    &lt;!-- zenback_title_end --&gt;
    <div class='post-header'>

<div class='post-body entry-content'>
      &lt;!-- zenback_body_begin --&gt;
      <data:post.body/>
      &lt;!-- zenback_body_end --&gt;
      <div style='clear: both;'>

テーマによって若干違うかもしれませんが、大体同じような感じでできると思います。間違いがあったら指摘おねがいします。

＞＞ zenback

追記：2010/12/02 新しいスクリプトコード対応↓
追記：2010/12/18 if文抜けてたので修正しました。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- X:S ZenBackWidget --><script type="text/javascript">
// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenb
省略～
ath.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script><!-- X:E ZenBackWidget -->
</b:if>