はてなブックマークボタンを本文に設置する

はてなブックマークのボタンを本文に設置してみたいと思います。
まずは、はてなブックマークのボタンのコードを取得します。
はてなブックマーク




まず、ブログのURLとタイトルを入力し、3種類のタイプから一つを選びます。今回はシンプルにしました。コードはこちら。

<a href="http://b.hatena.ne.jp/entry/http://etotakashi.blogspot.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="ふっとぼうず" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

続いて、このコードをテンプレートに挿入します。
まず、ブログの本文の前に表示する場合。

1．まず、ダッシュボードの「デザイン」タブから「HTMLの編集」を選択。
「ウィジェットのテンプレートを展開」のチェックボックスにチェックを入れてください。
2．続いて、表示されているコードから <div class='post-header-line-1'/>を検索します。
3．このコードの下にはてなブックマークから取得した上記のコードを貼り付けます。

ブログの本文の後に表示する場合。

1．ダッシュボードの「デザイン」タブから「HTMLの編集」を選択。

「ウィジェットのテンプレートを展開」のチェックボックスにチェックを入れてください。

2．続いて、表示されているコードから <data:post.body/> を検索。
3．このタグの下にはてなブックマークから取得したコードを貼り付けます。

以上が、はてなブックマークボタンの設置の方法でした。

Bloggerではどのコードをいじれば、本文に要素を埋め込めるのか、という部分でも参考にしてください。