Cara Membuat Social Widget di 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/100503867094250062553'>
   <div class='social googleplus'/>
 </div></a>
<a href='http://twitter.com/agussuryana_14'>
 <div class='social twitter'/>
 </div></a>
<a href='http://www.facebook.com/agustng70'>
 <div class='social facebook'/>
 </div></a>
</div>

Silahkan huruf yang berwarna Hijau disesuaikan dengan selera :)

Sumber