Cara Membuat Widget Social Media di Blog - Assalamualaikum, rasanya sudah lama blog ini tidak update seperti dulu yah, ya memang kesibukan saya mengurus blog yang lainnya sehingga blog yang ini tidak pernah diurus, hehehehe.

Tapi jangan khawatir sob, karena sekarang saya akan membagikan sebuah tips blogger lagi, yaitu Cara Membuat Widget Social Media di Blog dan widget sosial ini sangat simple dan tentunya tidak mengganggu loading blog sobat.


langsung lanjut ke tkp aja ya sob...

#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; }

5.  Simpan Template.
4.  Selanjutnya, 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='Plus Google Sobat'>
   <div class='social googleplus'/>
 </div></a>
<a href='Url Twitter Sobat'>
 <div class='social twitter'/>
 </div></a>
<a href='Url Facebook Sobat'>
 <div class='social facebook'/>
 </div></a>
</div>

5. Simpan Gadget.