ヘッダー下に読者登録ボタンを設置するには

アメブロのヘッダー下に読者登録ボタンを設置する方法

こんにちワ。日本そばが大好きだけど、あだ名がワンタンだった"道路工事きもまろ"ですww

この記事、以前にも書きました。只今、過去記事を見直して修正しております。御存知の方はスルーしちゃって下さいませ。m(_ _ )m

ヘッダー下に読者登録ボタンを設置する方法

1.フリープラグインにjqueryを有効にする為のコードを記述

まず最初に、アメブロのフリープラグインにjqueryを有効にするための以下のコードを、フリープラグイン編集画面の最上部に記述して下さい。（※既に記述してあれば、二重に記述する必要はありません。）

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>

2.再度フリープラグインにコードを記述

再度、 フリープラグインに以下のコードを記述して下さい。（※今度は、既に記述されてるコードに割り込む形にならなければ、特に場所の指定はありません。）

<!--ヘッダー下読者登録ボタン-->
<script type="text/javascript">
$(function(){
var r = $('<br><div class="readercheck"><a href="http://blog.ameba.jp/reader.do?bnm=wantan-52">⇒このブログの読者になる</a></div>');
$('.pagingArea:first').before($(r).clone());
});
</script>

※赤字の箇所には、 御自身のアメーバＩＤを記入して下さい。

※緑字の文章は任意のものを、お好みで書き換えて下さい。

3.フリースペース編集にコードを記述

今度は、 フリースペース編集に以下のコードを貼り付けて下さい。（※ここでボタンの装飾をします。）

<!--●ヘッダー下、読者登録ボッタン-->
<style type="text/css"><!--.readercheck{margin:0 auto;padding:0;width:330px;height:45px;}.readercheck a{text-align:center;margin:0;padding-top:5px;width:315px;height:25px;box-shadow: 5px 5px 5px #666666; /* firefox　*/-webkit-box-shadow: 8px 8px 8px #666666; /* safari、chorme */border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;font-size:15px !important;font-weight:normal !important;background:#78ff94;/* ←通常時のボタンの色　*/color:#000000 !important;/* ←通常時のボタンの文字の色　*/text-decoration:none !important;display:block;}.readercheck a:hover{background:#ffffff;/* ←マウスが乗った時のボタンの色　*/color:#FF0000 !important;/* ←マウスが乗った時のボタンの文字の色　*/}--></style>

※ボタン、ボタンの文字色等は、お好みで調整して下さい。

参考までに・・⇒色見本と配色サイト - color-sample.com

※この際、フリープラグイン、フリースペース共に、[使用する機能]に入れておいて下さい。（↓）

〇要約
フリープラグインにjqueryを有効にする為のコード（※既に記述してあれば不要）とヘッダー下読者登録ボタン用コードを記述→フリースペースに装飾用のコードを記述

〇思うこと
自分は、このブログをビジネスに繋げる気は、今のところありません。
でもって、読者さんが増えて欲しいとも、それほど思っていません。
じゃ、なんでこんなボタンを設置してるのかというと・・

カッコイイから・・です（笑）

☆ブィブィ  ('-^*)/

このまま、ドリフのエンディングテーマが聞こえて来そう^^;

ね！？

表示 - 継承 2.1