為Blogger加個酷酷的Navigation Icon吧！
http://reader.feedshow.com/show_items-feed=b1effd66409dda077af2d0e7d939197e
啊啊啊～該來的終究還是會來！呵呵！想偷懶都不行啦！ ^_^
幾個在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{ /*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;
}
PS: 其中紅色部份為小圖標的位置靠左及上方距離設定，可以自行調整
2. 加入Scroll定位及支援滑順Scroll的Javascript內容
同樣找到 ]]> 但這次將下面兩句 JavaScript 語法改為放在 ]]> 的下面一行
PS: 兩JavaScript存放位置由Kaie兄熱情提供，你想抓回家放置到你的網路空間，再將上面連結位置修改成你的即可。下載位置請查閱文後補充！
3. 追加 Navigation Icon 的 Html 語法內容
找到
http://reader.feedshow.com/show_items-feed=b1effd66409dda077af2d0e7d939197e
啊啊啊～該來的終究還是會來！呵呵！想偷懶都不行啦！ ^_^
幾個在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{ /*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;
}
PS: 其中紅色部份為小圖標的位置靠左及上方距離設定，可以自行調整
2. 加入Scroll定位及支援滑順Scroll的Javascript內容
同樣找到 ]]> 但這次將下面兩句 JavaScript 語法改為放在 ]]> 的下面一行
PS: 兩JavaScript存放位置由Kaie兄熱情提供，你想抓回家放置到你的網路空間，再將上面連結位置修改成你的即可。下載位置請查閱文後補充！
3. 追加 Navigation Icon 的 Html 語法內容
找到
將下面整段內容放到
的下面一行
PS: 以上語法僅為示範，你可依照需要連結多寡自行追加！只要注意包裹在之間，並加上
斷行指令即可。
1. 藍色為對外連結網址，改成你想連結的位置即可。
2. 紅色則為設定想 Scroll 到哪個側邊欄的ID位置，直接改為你想控制移動到的側邊欄ID即可。
3. 綠色則是小圖標的檔案連結位置，將取得的每個小圖標放置到你的網路空間，並依序給與連結位置即可。
4. title與alt為滑鼠移到時顯示的說明內容，可自行修改。
至於可能有朋友不知道每個側邊欄ID要去哪裡找，在不勾選"展開小裝置範本"的狀況下，只要找到一行連著一行如下的語法，其中的widget id='xxxxxx'的xxxxxx就是每個側邊欄獨一無二的ID囉！！
應該會有朋友因為沒有"適當的小圖標"而傷腦筋，如果你不想像我喜歡通通自己畫也沒關係，不管你是因為懶得動手畫或不會畫或其他不可抗拒的猛爆性雜七亂八因素，通通沒關係！這裡報你一個好所在！只要前往以下連結，雖不能包山包海，至少有相當不錯的小圖標供你使用喔～
給我小圖標呀呀呀～～
2007.2.10 補充：
針對想下載JavaScript放置在自己網路空間的朋友，請看這邊，先前寫這篇心得稍稍疏忽了一下，要下載回去的話除了語法裡的兩個JavaScript以外，還必須額外再下載一個！這是讓其中一JavaScript呼叫用的！少了這個功能將無法正常！所以一共得下載三個JavaScript回家去！
以下為三個JavaScript位置：
http://chenkaie.googlepages.com/prototype.js
http://chenkaie.googlepages.com/scriptaculous.js
http://chenkaie.googlepages.com/effects.js
其中的effects.js跟其他兩個放同一空間即可
2007.2.21 補充：
以上能讓Navigation Icon固定住不隨著拖拉頁面而移動的語法是採用CSS裡的position:fixed命令做到，不過該命令在IE6並不支援（新版IE7已支援），所以語法中特別用position:absolute讓IE6避掉誤判而產生的顯示推擠錯誤！使Navigation Icon依然可以順利在IE6正確位置正常顯示，但並無固定，會依頁面拖拉上下移動！僅IE7, FireFox, Safari等瀏覽器支援position:fixed固定命令，特別做個補充說明！
Author: "Benjamin" Tags: "Blog Notes, New Blogger"
PS: 以上語法僅為示範，你可依照需要連結多寡自行追加！只要注意包裹在之間，並加上
斷行指令即可。
1. 藍色為對外連結網址，改成你想連結的位置即可。
2. 紅色則為設定想 Scroll 到哪個側邊欄的ID位置，直接改為你想控制移動到的側邊欄ID即可。
3. 綠色則是小圖標的檔案連結位置，將取得的每個小圖標放置到你的網路空間，並依序給與連結位置即可。
4. title與alt為滑鼠移到時顯示的說明內容，可自行修改。
至於可能有朋友不知道每個側邊欄ID要去哪裡找，在不勾選"展開小裝置範本"的狀況下，只要找到一行連著一行如下的語法，其中的widget id='xxxxxx'的xxxxxx就是每個側邊欄獨一無二的ID囉！！
應該會有朋友因為沒有"適當的小圖標"而傷腦筋，如果你不想像我喜歡通通自己畫也沒關係，不管你是因為懶得動手畫或不會畫或其他不可抗拒的猛爆性雜七亂八因素，通通沒關係！這裡報你一個好所在！只要前往以下連結，雖不能包山包海，至少有相當不錯的小圖標供你使用喔～
給我小圖標呀呀呀～～
2007.2.10 補充：
針對想下載JavaScript放置在自己網路空間的朋友，請看這邊，先前寫這篇心得稍稍疏忽了一下，要下載回去的話除了語法裡的兩個JavaScript以外，還必須額外再下載一個！這是讓其中一JavaScript呼叫用的！少了這個功能將無法正常！所以一共得下載三個JavaScript回家去！
以下為三個JavaScript位置：
http://chenkaie.googlepages.com/prototype.js
http://chenkaie.googlepages.com/scriptaculous.js
http://chenkaie.googlepages.com/effects.js
其中的effects.js跟其他兩個放同一空間即可
2007.2.21 補充：
以上能讓Navigation Icon固定住不隨著拖拉頁面而移動的語法是採用CSS裡的position:fixed命令做到，不過該命令在IE6並不支援（新版IE7已支援），所以語法中特別用position:absolute讓IE6避掉誤判而產生的顯示推擠錯誤！使Navigation Icon依然可以順利在IE6正確位置正常顯示，但並無固定，會依頁面拖拉上下移動！僅IE7, FireFox, Safari等瀏覽器支援position:fixed固定命令，特別做個補充說明！
Author: "Benjamin" Tags: "Blog Notes, New Blogger"
沒有留言:
張貼留言