blogger左側加入可隨著畫面浮動的導覽圖標及對話泡泡

有朋友問到左側那欄導覽圖標, 無論怎麼上下移視窗, 都還是可以看到的效果怎麼做的? 其實現在很多部落格都在使用. 整理一下常用的做法,及加入一個效果,只要滑鼠移動到圖標上方, 會出現一個對話泡泡.

休息一陣子後, 總算打起精神來, 把這段程式碼修一修, 順便改掉原來的圖標. 現在看起來, 也多些趣味了!

首先要先準備一下自己的圖標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

0 意見:

張貼留言