Bloggerでtopsyの「この記事についてつぶやくボタン」を強引に設置する方法

もっと良いやり方があるのか知りませんが


私の方法はかなり強引です。




テンプレートを必ずバックアップしておきましょう。



まず、topsyのボタンについてですが


私のブログの右上にあるやつです。

(え…君の右上にはないだって？ｗそれはトップページには設置してないからさｗ)




さて、まずボタンのスクリプトの出所ですが。






Topsy Retweet Button for Web Sites

この辺からGETしてください。




次にそこの中から適当な

スクリプトを選ぼう！


私の場合はこれを選びました。


<div style="float: right; margin-left: 1em"><script type="text/javascript">
var topsy_nick = "あなたのTwitterユーザID";
var topsy_style = "big";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script></div>





次に一般的なやり方で


ガジェットの追加から


HTML＋JavaScriptを選択して




何の迷いも無く先ほどのスクリプトを




コピペしてください。



ウィジェットの名前は

「Twitterでこの記事についてつぶやく」

にしておきましょう。



位置を

ブログの投稿の上ぐらいに

配置してください。





ここからが
かなりな力技です。



まず、レイアウト->HTMLの編集から




先ほどの「Twitterでこの記事についてつぶやく」を探してください。


すると

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML2' locked='false' title='Twitterでこの記事についてつぶやく' type='HTML'/>

<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'/>
</b:section>



こんなコードが見つかって欲しい！！！


無ければ空気を読んでやってください。。。





そのコードを下記のように変更してください。



<b:if cond='data:blog.pageType == "item"'>

<b:section class='main' id='twitBlog' showaddelement='no'>
<b:widget id='HTML2' locked='false' title='Twitterでこの記事についてつぶやく' type='HTML'/>
</b:section>

</b:if>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'/>
</b:section>





これで、ほとんどミッションコンプリートです。



後は気に入らない方は

CSS等で調整してください。



今日は大作でした。