[ChiNa]

Its because I think you havnt seen my new instructions, but anyways, I have made the code so it fits with your template, and when you hover the icons will shine all arround.

Use the code below, and read the rest of my explanation below:

<style type="text/css">
#SideBar{
list-style:none;
position:fixed;
z-index:5;
right:0;
top:130px;
width:24px;
padding:8px 5px;
border:2px solid #fff;
border-right:none;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background: rgba(255, 255, 255);
background:-moz-linear-gradient(top,rgba(255, 255, 255),rgba(255, 255, 255));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255)),to(rgba(255, 255, 255)));
background:linear-gradient(top,rgba(255, 255, 255),rgba(255, 255, 255))
}
.img:hover {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 6px 1px rgb(210,105,30);
}
#SideBar li{
margin:9px 0 0 0;
line-height:0
}
#SideBar li:first-child{
margin-top:0
}
#SideBar a{
display:block;
width:24px;
}
#SideBar a span{
position:absolute;
top:-999em
}
</style>
<ul id="SideBar">
<a href="index.php" title="Home"><div class="img"><img src="images/sidebar/home.png"></a></div></li>
<li><a href="usercp.php" title="UserCP"><div class="img"><img src="images/sidebar/profile.png"></a></div></li><li><a href="search.php" title="Search"><div class="img"><img src="images/sidebar/search.png"></a></div></li>
<li><a href="profile.php?do=editavatar" title="Edit Avatar"><div class="img"><img src="images/sidebar/avatar.png"></a></div></li>
<li><a href="http://facebook.com" title="Facebook"><div class="img"><img src="images/sidebar/facebook.png"></a></div></li>
<li><a href="http://twitter.com" title="Twitter"><div class="img"><img src="images/sidebar/twitter.png"></a></div></li>
<li><a href="http://youtube.com" title="Youtube"><div class="img"><img src="images/sidebar/youtube.png"></a></div></li>
</ul>

Now if you wanted to change the Gradient or the Shadow, then change the line that I have marked in red, and only change the NUMBERS or DIGGITs in blue color, IF you want to change your shadow color.

First go to Go to this link your RGB CODE: http://www.tayloredmktg.com/rgb/

Find the line below in the CODE:
box-shadow: 0 0 6px 1px rgb(210,105,30);

Only replace the BLUE DIGGITs or NUMBERS with your rgb code from this site http://www.tayloredmktg.com/rgb/

GOOD LUCK