2014年8月5日火曜日

Bloggerカスタマイズ 

ページトップ戻るボタン

記事や画像が多いページは、スクロールさせるのがとても多く
ホームへ戻りたいときなど大変・・・
そんな時ページトップボタンがあると便利

今回は難しいことはなく、簡単に設置できるものを紹介

デザインはとてもシンプルです




まずはじめに

ボタン設置前に念のため
元のテンプレートのバックアップを取っておきます

テンプレート画面から

バックアップ/復元→テンプレートをすべてダウンロード




ダウンロードしておけば、元のデザイン戻したい時に便利です。



次はボタンの設置

まずテンプレートからHTML編集を選びます

を検索します
・CTRL+Fで探すのが簡単です


見つかったら
の直上に以下のソースコードを貼ります
<style type='text/css'>
#PageTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($) {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr(&quot;href&quot;);
if ($(window).scrollTop() != &quot;0&quot;) {
$(this).fadeIn(&quot;slow&quot;)
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == &quot;0&quot;) {
$(scrollDiv).fadeOut(&quot;slow&quot;)
} else {
$(scrollDiv).fadeIn(&quot;slow&quot;)
}
});
$(this).click(function() {
$(&quot;html, body&quot;).animate({
scrollTop: 0
}, &quot;slow&quot;)
})
}
});
jQuery(function($) {
$(&quot;#PageTop&quot;).scrollToTop();
});
</script>
<a href='#' id='PageTop' style='display:none;'>Page Top</a>
view raw トップ戻る hosted with ❤ by GitHub


貼れたらテンプレートをプレビューで確認してOKなら
テンプレートを保存をします

参考元サイトhttp://www.miyacozi.com/2013/11/blogger.html

にほんブログ村 アニメブログ アニメ感想へ
ブログランキング参加中↑


Related Posts Plugin for WordPress, Blogger...

0 件のコメント :

コメントを投稿

スポンサーリンク

オススメサイト記事

アニメの扉過去記事

日本ブログ村

blogmura_pvcount