Tumblr共有ボタンの設置方法にあるコードを貼り付けるだけです。
Advancedを選択するとTumblrに共有される形式をリンク、引用、写真、ビデオの中から選択することができるようです。
先ずは基本のBasicを選択します。
BloggerにTumblrで共有ボタンを設置する
Tumblr共有ボタンのステップ1にあるJavaScriptを/headの前にコピーします。<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>
1.Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2.テンプレートから /head を検索。
3./headの下にコードを張付ける。
続いてShare button codeにあるコードを貼り付けてみましたが、Tumblrで共有ボタンが表示されません。
ボタン画像のURLが正しく解釈されていないのではと思い、コードをみると画像のURLがアポストロフィで囲まれていましたので、これをクォートに変更してみると『Tumblr共有ボタン』は表示されましたが、表示位置が変です。
再びコードを眺めると<a>タグで「Share on Tumblr」という文字列にリンクをさせているのですが、表示上にこの文字列はありません。text-indent:-9999px という記載があるので、おそらくこれがあり得ない場所に文字列を飛ばしているのではないかと考え、「Share on Tumblr」とtext-indent:-9999pxを外してみました。
するとTumblr共有ボタンが正しく表示されました。(自分の感に万歳!)
下記の【After】がBlogger用に変更した『Tumblrで共有ボタン』のコードです。
【Before】
<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>
【After】
<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:81px; height:20px; background:url("http://platform.tumblr.com/v1/share_1.png") top left no-repeat transparent;"></a>
このコードをテンプレートに埋め込みます。
1.Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2.テンプレートから <div class="post-header-line-1">を検索。
3.<div class="post-header-line-1">の下にコードを張付ける。
Tumblr共有ボタンを試す
Tumblr共有ボタンを押すとShare on Tumblrの画面が表示されます。Basicを選択しているとLinkがデフォルトになるようです。左下の『Create post』でTumblrに投稿されます。BloggerへのTumblr共有ボタンの設置はこれで終了です。
今日の一曲(2曲セットで)
ザ・ベスト・オブ・セックス・ピストルズ |
ザ・ベスト・オブ・セックス・ピストルズには、勿論この2曲も収録されています。音量を上げて空気の振動を感じながら聴いてください。
Anarchy in the U.K. - The Sex Pistols
My Way - The Sex Pistols
0 件のコメント:
コメントを投稿