如何建立方便好用的側邊欄快速工具列

其

實這個側邊工具列我已經用很久了，中間好像換了幾次，才決定要用這個版本，所以之前的教學文章應該已經不符合這個版本，所以我再重新寫一次，順便整理一下作個筆記。

首先要先寫入CSS語法，設定它的出現位置並固定在那邊。在 <b:skin><![CDATA[和]]></b:skin>之間插入以下語法。
PS.但要注意的是，大小及位置要依自己的部落格進行調整，這個請自行設定。

CSS語法

/* Fixed Navi Bar
----------------------------------------------- */
.fixed_menu {
position: fixed; /*set the position type for non IE systems*/
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/
* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/

接著自行寫入一個div容器語法，來放置這個側邊欄語法，並設定要出現的功能。至於div容器的載入順序，就自己依喜好決定，這功能我希望是整個部落格都載入完之後最後才出現，所以我將整個div容器語法放在最後，也就是</body>之前。如下：

div放置位置

<div class='fixed_menu'>
.
.
.
側邊欄語法放置位置
.
.
.
</div>
</body>

然後是像首頁、RSS訂閱那些簡單的功能，語法寫法如下，你也可以依自己喜歡修改，但放大字型功能有點特殊，稍候介紹。

語法

<a href='網址連結' title='註解'><img alt='圖片註解' src='圖片連結f'/></a>

至於字型放大、縮小功能，可以參考我之前的文章：自訂部落格字體大小。
差別就在於將Step.3的語法放到這個側邊欄語法裡。

以下就是我的部落格整個語法內容，但請自行下載圖片放到自己的空間裡，因為我怕我的空間會爆，所以請有語法需求的人合作一下，謝謝，當然那個註解、名稱等也改成自己的部落格喔～

我的完整語法

<div class='fixed_menu'>
<a href='http://nekki1409.blogspot.com/' title='Back To Home'><img alt='Back To Home' src='http://gothicintw.pbworks.com/f/Home.gif'/></a>
<a href='http://feeds.feedburner.com/nekki1409' rel='external' title='Subscribe My Post'><img alt='Subscribe My Post' src='http://gothicintw.pbworks.com/f/MyFeed.gif'/></a>
<a href='http://www.intensedebate.com/allBlogCommentsRSS/2439' rel='external' title='Subscribe My Comment'><img alt='Subscribe My Comment' src='http://gothicintw.pbworks.com/f/MyComment.gif'/></a>
<a href='javascript:doZoom(16)' title='Large Font Size(16px)'><img alt='Large Font Size' src='http://gothicintw.pbworks.com/f/groesser.gif'/></a>
<a href='javascript:doZoom(14)' title='Default Font Size(14px)'><img alt='Default Font Size' src='http://gothicintw.pbworks.com/f/norm.gif'/></a>
<a href='javascript:doZoom(12)' title='Small Font Size(12px)'><img alt='Small Font Size' src='http://gothicintw.pbworks.com/f/kleiner.gif'/></a>
<a href='http://www.blogger.com/' rel='external' title='Sign in Blogger'><img alt='Sign in Blogger' src='http://gothicintw.pbworks.com/f/Blogger_Xmas_logo3.gif'/></a>
<a href='http://draft.blogger.com/' rel='external' title='Sign in Draft Blogger'><img alt='Sign in Draft Blogger' src='http://gothicintw.pbworks.com/f/Blogger_Xmas_logo11.gif'/></a>
<a href='http://www.blogger.com/follow-blog.g?blogID=5586986389269109409' rel='external' title='Follower Me!'><img alt='Follower Me!' src='http://gothicintw.pbworks.com/f/furl_48.gif'/></a>
<a href='http://twitter.com/Nekki1409' rel='external' title='Follower My Twitter!'><img alt='Follower My Twitter!' src='http://gothicintw.pbworks.com/f/Twitter.gif'/></a>
<a href='http://www.plurk.com/Nekki1409' rel='external' title='Follower My Plurk!'><img alt='Follower My Plurk!' src='http://gothicintw.pbworks.com/f/plurk.gif'/></a>
<a href='javascript:scroll(0,0)' title='Back To Top'><img src='http://gothicintw.pbworks.com/f/003a_56.gif'/></a>
</div>

read more...