「はてブの被ブックマーク数を表示する」をBloggerでやってみる

はてなに記載されている、「自分のブログに被ブックマーク数を表示する - Blogger」は、たぶん、Beta 版の時の方法ではないかと思う、、
(少なくとも自分のBloggerではテンプレートの変更方法が違う、、)
なので、新バージョンとなった、Blogger にて被ブックマーク数を表示する方法を解説しようと思ふ。。。
方法は２つあって、1つ目の方法は、簡単だけど表示位置が微妙。。２つ目の方法は、表示を位置を合わせるために、ちょっと難しくなってしまった方法。。

【方法１】※自己責任において編集を行ってください。。
１．「管理画面(マイレポートorダッシュボード) > テンプレート > HTML の編集 > テンプレートを編集」を表示して、右上にある、「ウィジットのテンプレートを展開」のチェックボックスを ON にする。

２．下記のように記載されている場所を探して、その下にはてブ表示ようのコードを貼り付け。※今回は、バックリンクの横あたりに配置してみる。

       <!-- backlinks -->
       <span class='post-backlinks post-comment-link'>
         #... いろいろ ...
       </span>
       # ---- ↓ココに貼り付け ----- #
       <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target="_blank">
       <img expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' alt="このエントリーを含むはてなブックマークを表示" title="このエントリーを含むはてなブックマークを表示" style="border:0;" />
       </a>
       # ---- ↑ココに貼り付け ----- #

っと、これが簡単な方法ですが、表示をしてみると、画像の位置が微妙にずれている、、、。
※HTMLタグのコピーは、マウスで範囲選択でやって下さい。。表示しきれてない文字があるので、、。

【方法２】
１．方法１－１と同様。
２．方法１と同様にコードを貼り付けるのですが、少しコードを変更してあります。

       <!-- backlinks -->
       <span class='post-backlinks post-comment-link'>
         #... いろいろ ...
       </span>
       # ---- ↓ココに貼り付け ----- #
        <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target="_blank" title="このエントリーを含むはてなブックマークを表示">
          <span class='hatena-counter' expr:style='"background-image: url(http://b.hatena.ne.jp/entry/image/" + data:post.url + ")"'> </span>
        </a>
       # ---- ↑ココに貼り付け ----- #

※HTMLタグのコピーは、マウスで範囲選択でやって下さい。。表示しきれてない文字があるので、、。

３．スタイルシートの追加をする。テンプレートの上部に、<b:skin> .. </b:skin> で、囲まれた部分があるので、その中へ下記のスタイル定義を追加する。

.hatena-counter {
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: left center;
  margin:0pt 0pt 0pt 0pt;
  padding: 15px;
}

簡単に解説すると「方法１」は、img タグでそのまま表示しているが、「方法２」は、span タグの background として、center 表示をしています。他の画像を見てみたら、そうやって定義されてたから真似してみただけ、、。

っと、以上ですが、もっと簡単な方法とかあったら教えてください( >< )