Bloggerの共有ボタンに「新 はてなブックマークボタン」を追加する…修正版

当サイトと同じ「共有ボタン」を作成したい方は…

 Bloggerの共有ボタンを自作ソーシャルブックマークボタンと入れ替える方法と必要性


「共有ボタン」だけ表示出来れば良い方は…

 Bloggerの「共有ボタン」が仕様変更で表示されない場合の修正


★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆

 Bloggerの共有ボタンに「新 はてなブックマークボタン」を追加する


の記事の修正版ですので…

先ずは上記リンクから…

「新 はてなブックマークボタン」の設定までを行ってください…

「共有ボタン」が表示された方は上記記事でも問題無しですが…

当記事の方法の方がより綺麗に表示できますし…

本来の場所での記述ですので呼び出しも速くなります…

「共有ボタン」が表示されていなくても…

[共有] ボタンを表示する…のチェックは外さないままで…

「デザイン」「HTMLの編集」「ウィジェットのテンプレートを展開」で…

<b:includable id='shareButtons' var='post'>

を「Ctrl + F」で検索すると該当する箇所は…

<b:includable id='shareButtons' var='post'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
</b:includable>

ってな感じになっていますので…

</b:includable> の1列上に…

以下の青と黄色と緑の太字文字列を追記して…こんな感じに…

「共有ボタン」が表示されている方は…
緑の太字文字列は既にある筈ですので無い方のみ追記してください…

<b:includable id='shareButtons' var='post'>
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='goog-inline-block share-button hatena-bookmark-button' data-hatena-bookmark-layout='simple' href='//b.hatena.ne.jp/entry/'>
<span class='マウス OFF 時の画像のクラス名' title='Hatena::Bookmark'/></a><script async='async' charset='utf-8' src='//b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
<a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
  <b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</b:includable>

<span class='マウス OFF 時の画像のクラス名' title='Hatena::Bookmark'/>

の部分は CSS Sprites で切り替えています…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


画像を切替えない場合は「img」タグでも OK ですが…

表示位置がズレる場合は…

style='position:relative; top:ピクセル; left:ピクセル'

ピクセル数値で調整してください…

CSS Sprites で画像を切替える方は…

「span」タグを使って…

CSS に以下を追記してください…

.post-footer span {vertical-align:baseline;}

「テンプレートを保存」して完了です…

Tips Universal Header Sidebar Footer Current-Label : Main