有朋友問到左側那欄導覽圖標, 無論怎麼上下移視窗, 都還是可以看到的效果怎麼做的? 其實現在很多部落格都在使用. 整理一下常用的做法,及加入一個效果,只要滑鼠移動到圖標上方, 會出現一個對話泡泡.
休息一陣子後, 總算打起精神來, 把這段程式碼修一修, 順便改掉原來的圖標. 現在看起來, 也多些趣味了!
首先要先準備一下自己的圖標icon(或參考
這裡), 大小約設在高度, 寬度在30px左右, 或自訂都可以.然後將這些圖標上傳到一個網路空間, 如有google帳號的人, 就可以去http://pages.google.com/開通空間, 然後就可以取得這些圖標所在網址了.
接下來就是修改程式碼的部分.
1.先找到
]]></b:skin>, 並將下列程式碼加在
]]></b:skin> 之上:
/*-- smallnav--*/
#smallnav{
position:fixed;
text-align:left;
margin-left:-20px;
margin-top:17px;
}
* html #smallnav{ /*IE only*/
position:absolute;
}
#smallnav a img{
opacity:0.6;
-moz-opacity:0.6;
filter:alpha(Opacity=60);
}
#smallnav a:hover img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
position:relative;top:1px;left:1px;
}
* html #smallnav a img{
filter:alpha(Opacity=100);
}
#smallnav img{
margin-bottom: 5px;
}
* html .smallnav{
margin-bottom: 7px;
}
部分, 可以調整導覽圖標的靠左或靠上方的距離
2. 在
]]></b:skin> 之後, 加入下列程式碼:
<script src='http://bloggertips.googlecode.com/files/prototype.js' type='text/javascript'>
</script>
<script src='http://bloggertips.googlecode.com/files/scriptaculous.js?load=effects' type='text/javascript'></script>
3. 在
<body> 後, 找到
<div id='outer-wrapper'> , 修改下述程式碼放到
<div id='outer-wrapper'>之後, 想放幾個連結, 就加幾個
<a href...>.... </a> <br>的程式碼,如下:
<div id='smallnav'>
<span>
<a href='部落格網址' style='border:0;' title='回首頁'><img alt='回首頁' class='smallnav'
src='圖標所在網址'/></a>
<br/>
<a href='訂閱文章的連結' style='border:0;' title='訂閱我的文章'><img alt='訂閱最新文章' class='smallnav'
src='圖標所在網址'/></a>
<br/>
</span>
</div>
1.在
<head>之後, 加入下列程式碼
<script src='http://bloggertips.googlecode.com/files/BubbleTooltips1.js' type='text/javascript'>>
<script type='text/javascript'>
window.onload=function(){enableTooltips("smallnav");};
</script>
想看看效果,可以在我的部落格左側導覽圖標上試看看囉!
在IE7及Firefox下, 是可以正常運作的.
本文來自:
Fun New Run High
