Sticky Footer for Blogger

Dawg House Design Studio - pie - footer
Blogger シンプルテンプレートのフッターに、固定されるメニューバーを表示してみました。

photo credit: Francisco Tosete via photopin cc



CSS Sticky Footer For Bloggerを使います。しかし、いくつかの変更点があるので、それを明示します。





#stickey_footer { /* This will make your footer stay where it is */
left: 0%;
width: 100%;
z-index: 300;
}
#footer_menu li span {
/* display:none; */
}



メニューバーの幅はブラウザいっぱいに表示させるようにしました。


z-indexは値が高いほうが上に来ます。よって、設定している人は、この値を変更して、どのコンテンツを上に表示するのか調整してください。


また、前回紹介した Web フォントを表示させる関係で spanを表示させるようにしました。


<div id="stickey_footer">
<!– Begin Footer Menu –>
<ul id="footer_menu">


# ここに左側に表示したいメニューを作る
サンプル:
<li><a href="URL" ><span>Twitter</span></a></li>


</ul>
<ul id="social_icons">
<!–Social Icons –>
<li>


# ここに右側に表示したいメニューを作る
サンプル:
<li><a href="URL" ><img src='画像URL' alt="" /><span>Twitter</span></a></li>


</li>
</ul>
</div>