読者登録ボタンを目立つように（追加）［新デザイン用］

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
　　　　　　　　　　　　　
　　　　　　
人気ブログランキングへ　FC2ブログランキングへ



１９日（金）に、「読者登録ボタンを目立つように」
という記事を書いて、オリジナルの読者登録ボタンを
右サイドバーとページ送り上部に設置しました。



今回は、ページ送り下部で記事上部と記事下部の
２箇所に設置してみたいと思います。



まず、フリープラグインに次のHTMLを追加します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div.pagingArea").append('<div class="reader_btn"><a href="http://blog.ameba.jp/reader.do?bnm=ここにアメブロＩＤを記載"></a></div>');
}
);
</script>

次にCSSを追加します。

/*■このブログの読者になる■*/
#reader_btn{
margin: 0 auto;
}
#reader_btn a {
background: url("アップロードした画像のＵＲＬ") no-repeat;
display: block;
height: 81px;*画像の縦*/
width: 302px;/*画像の幅*/
}
#reader_btn a:hover {/*マウスオーバー時*/
background-position: 0 -81px;
}

これで、ブログは、次のようになりました。





今回の記事は、下記ブログの記事内容も参考にさせて戴きました。
ありがとうございました。
↓↓↓
jquery 記事の上に読者になるボタンをつける｜新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ



今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

人気ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
　　　　　　　　　　　　　
　　　　　　
人気ブログランキングへ　FC2ブログランキングへ

クリックして戴けると、
とても励みになります。