Code Social Widget có hiệu ứng

Hình minh họa

Widget này có hiệu ứng làm mờ các icon khi rẻ chuột vào (trừ icon đang chứa trỏ chuột) giống như hình bên dưới:

Khi chưa rê chuột vào

Khi rê chuột vào Google +

Code phần CSS:

.social{margin:15px -10px 15px 0;padding:0;border:0} 
.social ul{list-style:none;display:inline} 
.social li{float:left;padding:0 4px 0 0}

Code chèn dưới thẻ <div id='sidebar-wrapper'>:

<div class='social'> 

<span class='fade'><ul> 

<li><a href='http://facebook.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWCDPGJVSU4AkRr8LNanikt5-ReB1AQErbZLfRH5g4fPnbHyHk2pUBXZbFBgSb-mrPTw_KAXAqY6ho_QfE0nC7xjFhLC60LFzpW0krwhHVlWY6qG-ZCzFyoFJ-SVhH4i5Ggv4XmUmbOKKc/s57/Facebook%2520alt%25201.png'/></a></li> 

<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivKO7YelmOnAjMiQQjX3BhpFkczdRX7JwgrH_r1tRAreoSCxvIEybW0ieY12bSWBcBPpmUHNWde8NJuDs1VlQDi5KfuPAKmTe14jZwqDHH_GbLwp0E41VWhyphenhyphenayunSwSD11N1fUZDOP7nR4/s57/Google%252B%2520alt.png'/></a></li> 

<li><a href='http://pinterest.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixuZO9oQoE7TZPc5FRHXm2oAPuJwBrEGo9IuJ_cuSVI_W0T2w9w7Umz1txgLt56_Tu0YYbXUMeTUno4c4dvv6GBXx8YmTwa_rUvvJJKauGfvH98QMBxzyE0dolXw9qgRPN3YcbgofGZk-T/s57/Pinterest%2520alt.png'/></a></li> 

<li><a href='http://feeds.feedburner.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjidLX0U76K3sNMf9RjWkIfe5vziCnkLAPZjn63dqKI6OlZX8ilaUPmvl3Um2aPNRJpf0RKaqbCLu6K_9x_IGQMW239V2DlVgn6lqO1gCU3Ii6-6vOYrxCDZDIGw5jgsfdnZShU85EUQVl/s57/RSS%2520Feed.png'/></a></li> 

<li style='padding:0px'><a href='http://youtube.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-KqkpLpaz5VLbm3zD87NzMwsK0krYoViMbgHQ-tbAsGh2l8AGAcHGld5NiuTu-hwPCM4EHtsArc8SjKooGmek1MehUdBzXM6L2h9a1wODfp8SVIaEv4s7adFRWmpikiQCF02MfymRGnjX/s57/YouTube%2520alt%25201.png'/></a></li> 

</ul></span><div style='clear: both;'/> </div>

Code chèn phía trên thẻ </body>:

<script src='http://blogthietke.googlecode.com/files/fadelist.js' type='text/javascript'/> 

<script type='text/javascript'> 

$(document).ready(function(){ 

if(!$.browser.msie) $(&quot;.fade ul li&quot;).hover(function() {$(this).siblings().stop().fadeTo(400,0.4);}, 

function() { $(this).siblings().stop().fadeTo(400,1); }); 

}); </script>

Các bạn nên lưu lại file javascript trên để backup sau này khi cần thiết.

Chúc các bạn thành công!