2005年12月20日 星期二

Blogger功能加強 - Navigation bar

參考資料:Ben's 部落不及格 - 為Blogger加個酷酷的Navigation Icon吧!

Step 1. 將以下Navigation bar的CSS放在]]></b:skin>的上一行。

/*-- mininav--*/
#mininav{
position:fixed;
text-align:left;
margin-left:-20px;
margin-top:17px;
}
* html #mininav{ /*IE6 only*/
position:absolute;
}
#mininav a img{
opacity:.6;
-moz-opacity:0.6;
filter:alpha(Opacity=60);
}
#mininav a:hover img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
position:relative;top:1px;left:1px;
}
* html #mininav a img{
filter:alpha(Opacity=100);
}
#mininav img{
margin-bottom: 5px;
}
* html .mininav{
margin-bottom: 7px;
}


其中紅色部為設定Navigation bar的位置,可以自行調整。

Step 2. 將以下捲動定位及順滑捲動的javascript放在]]></b:skin>的下一行。

<script src='http://planykao.googlepages.com/prototype.js' type='text/javascript'> </script>
<script src='http://planykao.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'></script>


除了上述兩個javascript之外,還需要
http://planykao.googlepages.com/effects.js
和上述兩個javascript檔案放在同一個地方即可。


Step 3. 再把以下Navigation bar的HTML語法加到<div id='outer-wrapper'>的下一行。

<div id='mininav'>
<span>
<a href='你的Blog網址' style='border:0;' title='回到首頁'><img alt='回到首頁' class='mininav' src='小圖標連結位置'/></a>
<br/>
<a href='你的Flickr網址' rel='external' style='border:0;' title='我的Flickr'><img alt='我的Flickr' class='mininav' src='小圖標連結位置'/></a>
<br/>
<a href='你的訂閱文章連結' rel='external' style='border:0;' title='訂閱我的文章'><img alt='訂閱我的文章' class='mininav' src='小圖標連結位置'/></a>
<br/>
<a href='#' onClick='new Effect.ScrollTo("Profile1",{offset: 0})' style='border:0;' title='關於我'><img alt='關於我' class='mininav' src='小圖標連結位置'/></a>
<br/>
<a href='#Top' onclick='new Effect.ScrollTo("header-wrapper",{offset: 0})' style='border:0;' title='回到最上層"'><img alt='回到最上層' class='mininav' src='小圖標連結位置'/></a>
</span>
</div>


紅色部份為側選欄的ID,在範本中找到類似以下的片段,
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
其中紅色部份即為該側邊欄的ID

需要小圖示的話,可以到這邊下載。