サイドスペースを有効活用する為に、
スクロール時に現れるウィジェットコンテンツを表示する方法。
Bloggerでは、
公開ファイルを読み込むことによってjQueryを使えるようになります。
既に、
BLOGGERでブログトップまで移動できるアイコンを表示する方法においても
jQueryは導入済みですが、
(このページ(記事)をはじめて見られた方もいらっしゃると思うので記載します。)
まずはHTML編集で、
以下を
</head>の上に挿入。
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
そして、
挿入した箇所の下に、以下jQueryコードを追記します。
<script>$(function(){ $("#fixed-box").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 1000) { $('#fixed-box').slideDown(100); } else { $('#fixed-box').slideUp(100); } }); });});</script>
#fixed-box{
position: fixed;
top: 10px;
z-index: 0;
}.footer-outer
{
position: relative;
z-index: 1;
background-color: #FCFCFC;
}
そして管理画面より、
レイアウト>ガジェットを追加>HTML/JavaScriptを選択して、
表示したいjava/HTMLタグを以下のタグで囲みます。
タイトル入れなくても大丈夫です。
<div id='fixed-box'>
(ここに挿入)
</div>