【转贴】為Blogger加個酷酷的Navigation Icon吧

这个需要和相关的模板匹配，才能有相应的效果，大家可以自己试试看。

啊啊啊～該來的終究還是會來！呵呵！想偷懶都不行啦！ ^_^
幾個在Blog上認識的朋友們，或是來信或是MSN的都提到我Blog左上方的小控制按鈕是怎麼搞上去的，嘻嘻！拖了很久的心得看來是躲他不掉囉！現在就將這個小東東的具體做法給貼出來！大夥接住囉～～

只要按步驟，也就能在Blogger上擁有像WordPress某些樣版左上方的小圖標工具欄囉！

因 為我的 Navigation Icon 算是變種，也就是並不像WordPress是固定住不動的，所以以下就特別針對固定不動的版本加以說明，這個版本比WorePress炫的是，他不但一樣 固定住，當你點擊時還會很滑順的移動到該側邊欄位置！挺酷的！而且也支援小圖標半透明，滑鼠移動到圖標則不透明顯示！再酷一個！^_^

想先知道效果可以前往以下各友站"試玩看看"～嘻嘻！
Kaie's Blog
Hguei's 補玩計劃
宮廷裡的小侍衛
PS: 大聲告訴各位，友站可也有很多東東可以挖喔！嘻嘻！有問題也可以用力向他們提問，嘻嘻嘻嘻！
（謎：這叫做...責任分流嗎...嘿嘿嘿！

首先，每次都一樣的步驟，先進入控制主頁 > 範本 > 修改HTML
這次我們不用勾選"展開小裝置範本"！

1. 加入 Navigation Icon 的 CSS內容：
找到 ]]> 並將下面整個 CSS 規範放置在 ]]> 的上面一行

/*-- mininav--*/
#mininav{
position:fixed;
text-align:left;
margin-left:-20px;
margin-top:17px;
}
* html #mininav{ /*IE 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;
}
PS: 其中紅色部份為小圖標的位置靠左及上方距離設定，可以自行調整

2. 加入Scroll定位及支援滑順Scroll的Javascript內容
同樣找到 ]]> 但這次將下面兩句 JavaScript 語法改為放在 ]]> 的下面一行



PS: 兩JavaScript存放位置由Kaie兄熱情提供，你想抓回家放置到你的網路空間，再將上面連結位置修改成你的即可。

3. 追加 Navigation Icon 的 Html 語法內容
找到

將下面整段內容放到

的下面一行

Profile1",{offset: 0})' style="border: 0pt none ;" title="關於我">


header-wrapper",{offset: 0})' style="border: 0pt none ;" title="回到最上層"">

PS: 以上語法僅為示範，你可依照需要連結多寡自行追加！只要注意包裹在之間，並加上
斷行指令即可。
1. 藍色為對外連結網址，改成你想連結的位置即可。
2. 紅色則為設定想 Scroll 到哪個側邊欄的ID位置，直接改為你想控制移動到的側邊欄ID即可。
3. 綠色則是小圖標的檔案連結位置，將取得的每個小圖標放置到你的網路空間，並依序給與連結位置即可。
4. title與alt為滑鼠移到時顯示的說明內容，可自行修改。

至於可能有朋友不知道每個側邊欄ID要去哪裡找，在不勾選"展開小裝置範本"的狀況下，只要找到一行連著一行如下的語法，其中的widget id='xxxxxx'的xxxxxx就是每個側邊欄獨一無二的ID囉！！

Label1" locked="false" title="Categories" type="Label">
HTML8" locked="false" title="Previous Posts" type="HTML">
HTML3" locked="false" title="Recent Comments" type="HTML">
HTML4" locked="false" title="Message Board" type="HTML">
LinkList3" locked="false" title="Events" type="LinkList">

转自 http://www.mangbar.com/document/5d023b21107b42bb0110a5b309ce1121