Bloggerでコメントフォームとバックリンクを変更する設定と記述…page2

Page 2 of 3 コメントフォーム編

コメントフォームは「ポップアップ ウィンドウ 」を選択すると…

そのリンクは…default では文字リンクでこんな感じ…


コレじゃぁ…あんまりです…

…なので…「ボタンリンク」や「画像リンク」に変更して…

少しでも認知度をアップさせましょう…

どちらを選択しても HTML での記述する場所は同じです…

「画像リンク」にしたい方は…

ご自身で画像を作成して任意の場所にホストしておいてください…

当サイトでは「ボタンリンク」で…

マウスの ON / OFF でボタンを切り替えています…

マウス OFF 時のボタン

マウス ON 時のボタン

…ってな感じになります…

実装しているボタンとは多少違いますが…

実装しているボタンは JavaScript で角丸にしていますから…

ここでは通常のボタンでの説明にさせて頂きます…

尚…カスタマイズに際しては…

以下もお読みになることをお奨めします…

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

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


 Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」

 Google Blogger用のファイル保存場所としてのGoogle sites/Picasa


先ずはマウス ON 時にボタンの背景色を変えるために…

CSS に色を変化させるためのクラスを記述します…

.green:hover { background: #2E8B57; }

緑文字の部分はお好きなクラス名・色に変更してください…

記述場所は…他の背景色を使っている部分でも…

.class='green' と書けば背景色を変化させられるので…

「Body セクション」に書いておきましょう…

その上で以下のタグを HTML に記述します…

←リンクは指定していません

<button class='green' id='button' title='コメントを投稿'><span class='id29'/> Post a Comment <span class='id29'/></button>

記事部分にこのボタンを使う場合は…
赤文字部分を…<span class='id29'></span> としてください…
画像を使いたくない場合は赤字部分を削除…

「CSS Sprites」の設定を行わないで…
違う画像を「img」タグで使う場合は赤字部分と入れ替えてください…

「デザイン」「HTMLの編集」から…

「Ctrl + F」で以下の文字列を検索…

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

赤文字部分を削除して先程のボタン タグと入れ替え…

「テンプレートを保存」して…

「ポップアップ ウィンドウ 」へのボタンリンクの出来上がり…

次項はバックリンクの h4 とリンク作成ボタンについてです…

現在の設定を記事にしました…

 jQuery UI Bloggerのコメント関連を「Accordion」で開閉してしてスタイリッシュにする

• Prev
• 1
• 2
• 3
• Next

Blogger Tips Current-Label : Blogger Template Customize