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

http://7gisa0234.blogspot.com/2014/08/blogger.html Bloggerカスタマイズ　
ブログランキング参加中↑