このブログの読者になるボタンの追加☆彡

ブログを読んでいただいたら、是非定期購読を(^^)。
ちょっと大きめのボタンをつけて目立とうと思います。

１．読者登録ボタンを作成（あるいは入手）する。
私は、以下のボタンを入手しました。

２．次にCSSを作成します。

「ブログを書く」→「デザインの編集」→「CSSの編集」

CSS編集画面の中の一番下に以下のコードを貼り付け

。

#reader_btn{
margin:10px 0px; 
}
#reader_btn a{
display:block;
width:360px; /*★画像の幅*/
height:91px; /*★画像の高さ÷２*/
background:url(http://画像URL) no-repeat 0px top; /* ★画像のアップロード先を指定*/
margin: auto;
}
#reader_btn a:hover{
background-position:0px -91px; /*★画像の高さ÷２（先頭にマイナスがつく）*/
} 

３．フリープラグインの設置
「ブログを書く」→「サイドバーの設定」→「フリープラグイン」 
とすすみ、
以下のコードを全てフリープラグイン内に張り付けます。尚■の部分は自身のアメーバIDです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load('jquery', '1.6.2');</script><script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script><script type="text/javascript">var r = '<div id="reader_btn"><a href="http://blog.ameba.jp/reader.do?bnm=■">/a>/div>';$(function(){$("div.pagingArea").eq(0).before(r);$("div.pagingArea").eq(1).before(r);});</script> 

貼り付けたら保存します。

これで、ページの上下に読者登録ボタンが設定されました☆彡

このボタンをポイント、クリックすると「読者になる」のページに画面が遷移します。