ブログにページのTopとEndへのジャンプを追加

ながーい記事を立て続けに書いてしまい、Topに戻る為のスクロールが面倒になったので
ページのトップにに戻るリンクを追加しました。
英語キーボードを日本語文字配列で使ってる関係で、キーボードのHomeとEndキーを他の文字に割り当ててしまったのねん。。。

↓こちらを参考にさせて頂きました。

・Bloggerカスタマイズ情報ブログ『Bloggerに「このページの先頭へ戻る」リンクを導入する方法』



Top


End

こんな感じのボタンをサイドバーの横に配置。ついでなのでページの最後に飛ぶボタンも追加してみました。

矢印画像の入手先はこちらっす→　ホームページ素材AC

ソースはこんな感じ。

<center>
<a style="display:scroll;position:fixed;bottom:120px;right:1px;
" href="#navbar" title="Back to PageTop">
<img style=" width: 40px; height: 40px;border:0;" src="上向き矢印の画像のURL" />
<br />
<span style="font-weight:bold;">Top</span></a><br />
<a style="display:scroll;position:fixed;bottom:40px;right:2px;
" href="#PageEnd" title="Go to PageEnd">
<img style=" width: 40px; height: 40px;border:0;" src="下向き矢印の画像のURL" />
<br />
<span style="font-weight:bold;">End</span></a>
</center>
<a name="PageEnd"></a>

オレンジ色の部分は使用する矢印画像によって異なる部分。
紫色の部分はご自分のお好みで。

これをレイアウトのガジェットを追加で、HTML/JavaScriptに貼付け、
それをページの下の方にレイアウトすれば出来上がり。

やはり不便なので、キーボートのhomeとEndキーは元に戻して使えるよーにしましたとさ。。。

【追記】
Linkのところの更新されたブログに付く葉っぱの画像も上に書いたところからもらってきたものに変えました。
ちなみにサイズを20x20 pxに縮小してあります。書かないと気づかれないと思うので一応書く。

いじょ