【Blogger】サイドバーにGush2と同様のSNSボタンを配置する方法

 

Bloggerで日記ブログを書いています。(誰も読んでませんが(^_^;))
さらさらぶろぐのサイドバーのSNSボタン(アイコン)と同じのをBloggerにも置いたので、その方法を記事にします。
Gush2のパクリですけど…(^^ゞCSSは大幅に変更してます。

しあがりはこんな感じです。
BloggerサイドバーSNSボタン完成例

サイドバーにガジェットを追加してHTMLを記述

レイアウト画面で、サイドバーにガジェット「HTML/JavaScript」を追加して、下記のコードを記述します。

【】で囲んでいるところ5箇所を自分用に書き換えてください。

参考までに、私のブログ(さらさらにっき)の場合を載せておきます。
【自分のツイッターID】=sarasaralli
【自分のフェイスブックID】=sarasarablog
【自分のグーグルプラスID】=110794312530102325687
【自分のブロガーアドレス】2箇所=http://sarasaralli.blogspot.com

テンプレートのカスタマイズでCSSを追加

「テンプレート>カスタマイズ>上級者向け>CSSを追加(一番下にあります)」で、下記のコードを追加します。

私の日記ブログは、サイドバーの幅=260pxです。幅が違うと表示ずれするかもしれません。

今後の課題

うまくできたぞって思っていたんですけど、Firefoxで見るとfeedlyがちょびっと上にずれちゃってるって、今気付いちゃいました(T_T)ChromeやIEではいい感じなんだけど…
アイコンフォントとimgを混在させてるから調整が難しいです。

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

関連記事-こちらもどうぞ

  • 記事はありませんでした。これから充実させていきますのでお楽しみに!

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。