Cara Membuat Social Widget di Blog

Halo sobat blogger, udah telat posting nih, sampe2 pageview menurun drastis :v. pada kesempatan kali ini saya akan memposting Cara Membuat Social Widget di Blog,  social widget sudah banyak dikenal di dunia blogger, salah satunya social widget punya hack4rt, Social widget ini termasuk elegan dan tidak memakan banyak loading pada blog.

EDIT HTML dan CSS
Pada EDIT HTML Template carilah kode ]]></b:skin> dan letakkan kode berikut tepat di atas ]]></b:skin>

#socialbox {
max-width:100%;
padding:10px;
background:#fff;
margin:0;
box-shadow:inset 0px 0px 6px #ddd;
-mox-box-shadow:inset 0px 0px 6px #ddd;
-webkit-box-shadow:inset 0px 0px 6px #ddd;
border:1px solid #ccc;
border-radius:5px;
overflow:hidden;
}
.social {
background:#fff url(http://1.bp.blogspot.com/--4CvEviaskw/UUsmFnxffgI/AAAAAAAAAD0/-yTMUjlcXPo/s1600/csg-514b240d34eeb.png) no-repeat top left;
}
.facebook,.googleplus,.twitter,.rss {
-moz-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
.text { height:24px;line-height:24px !important;float:left;margin:6px;font-size:17px;font-style:italic;color:#555;font-weight:bold;}
.facebook:hover{cursor:pointer; background-position: 0 0; width: 24px; height: 24px; }
.facebook{float:right;margin:6px 10px; background-position: 0 -44px; width: 24px; height: 24px; }
.googleplus:hover{ cursor:pointer; background-position: 0 -88px; width: 24px; height: 24px; }
.googleplus{float:right;margin:6px 10px; background-position: 0 -132px; width: 24px; height: 24px; }
.rss:hover{ cursor:pointer; background-position: 0 -176px; width: 24px; height: 24px; }
.rss{ float:right;margin:6px 10px;background-position: 0 -220px; width: 24px; height: 24px; }
.twitter:hover{ cursor:pointer; background-position: 0 -264px; width: 24px; height: 24px; }
.twitter{float:right;margin:6px 10px; background-position: 0 -308px; width: 24px; height: 24px; }

TATA LETAK (WIDGET)
Buatlah sebuah gadget dengan pilihan HTML/Javascript dan isi dengan kode HTML berikut

<div id='socialbox'>
 <div class='text'>Find Us :</div>
<a href='/feeds/posts/default'>
 <div class='social rss'/>
 </div></a>
 <a href='http://plus.google.com/14712215430804044545'>
   <div class='social googleplus'/>
 </div></a>
<a href='http://twitter.com/666_wtf'>
 <div class='social twitter'/>
 </div></a>
<a href='http://www.facebook.com/rivaillee'>
 <div class='social facebook'/>
 </div></a>
</div>

Silahkan huruf yang berwarna Hijau disesuaikan dengan selera :)
sumber script 
sumber script