Cara Membuat Social Widget di Blogger

Social widget meupakan widget yang sering diminati oleh kebanyakan blogger termasuk saya. Oleh karena itu social widget yang ditempatkan pada blog haruslah yang sesuai dengan blog dan tidak memberatkan blog itu sendiri. Disini Hack4rt akan memberikan social widget yang didapatkan dari template Simple Faster yang sudah responsive. Social widget ini termasuk elegan dan tidak memakan banyak loading pada blog. Berikut tutorialnya.

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='https://plus.google.com/105442910391457381115'>
   <div class='social googleplus'/>
 </div></a>
<a href='http://twitter.com/Novalbintangs'>
 <div class='social twitter'/>
 </div></a>
<a href='http://www.facebook.com/novalbs'>
 <div class='social facebook'/>
 </div></a>
</div>

Silahkan huruf yang berwarna Hijau disesuaikan dengan selera :)
Copas? Jangan lupa Sumber linknya!