Bikin Social Widget Keren

Sobat Vn, Maaf Ya Lama ngepostingya ,lagi males"an nih ,admin aja tadi bolos sekolah loh,hahaha padahal tinggal 1 pelajaran doang,ya gimana lagi admin udah males lagian ,udah panas cuacanya,laper,pokoknya muales deh hari ini, nah tapi soal ngblogger admin gak bosen koo -_-

oke admin akan nambahin ilmu yah ,admin akan ngajarin dan kasih cose cssnya tentang bikin social widget

social widget ini saya ambil dari kaka djhohanez ,hahaha..gapapa lah, dari pada ambil templatnya doang =P

Yang perlu anda siapkan adalah : ES KOPI,ROKOK,SNACK buat ngemil biar ga boring,,wkwkwkw becanda mulu nih si admin ,okkeee langsung ke tkp..

[-] Login dolo ya Sobat vn Seperti biasanya
[-] Pilih Ke Template
[-] Edit HTML
[-] Cari Code ]]><b:skin>
[-] Dan pastekan code dibawah ini :

#jocial{width: 305px;
float: left;margin-top: 10px;margin-left:20px;animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: #56c5ff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxNMqsQgebOBXWN3cl2oBAtQu8HlGudRLnfryKU01UNWq_TvrOR9ZSS85k3DNsFYKnwTnaO3ELhDD7NScFNp-JL5ukW4RPn99CXG91wM93J6satHwTH8CNJkYjT8ZZy395WSwWBT33GElh/s1600/facebook.png") no-repeat center center;border-radius:5px 0 0 0}
#jocial .twitter{width: 150px;
height: 74px;
background: #56c5ff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKfKaukWS3XB-SG_WD59iApENsMFexRBrzB23V16yacoOnPL4l3So9GaT4TN9ItcVfLWXIvXdvb5rNqM1h9f8BwDwJ8ZTpv1rX49won6L7qynMXzqrw3IFUQPM4HJRQZZkZTrtLugSEj3/s1600/Twitter.png") no-repeat center center;border-radius:0 5px 0 0}
#jocial .googleplus{width: 150px;
height: 74px;
background: #56c5ff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4sziji504BxoVIaBwPSZ1HkrNNBiFqs9bV1ygE_p-q-odMVfnxxMpfK4xe0xdJ-2_-EJpiJ8JF0UsjQk0URTK-gc32H2Noyo3gKtfuGeyupEPtIWxFg9cUjpDS3Gwj_eYGYpoINIP_6L/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: #56c5ff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJNSyndoyrjMGYPI1u335L03AD1T16JDxCoWYf45C9Mda31uztYwysahGlmbgVTTgFIeopXJtNAMlQjjohvX98Hliknz9pfEoOcRurX09ict77j3X2KTtuiY02kYQj_7xA4KI3f1BN1kXT/s1600/rss.png") no-repeat center center;border-radius:0 0 5px 5px;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKfKaukWS3XB-SG_WD59iApENsMFexRBrzB23V16yacoOnPL4l3So9GaT4TN9ItcVfLWXIvXdvb5rNqM1h9f8BwDwJ8ZTpv1rX49won6L7qynMXzqrw3IFUQPM4HJRQZZkZTrtLugSEj3/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4sziji504BxoVIaBwPSZ1HkrNNBiFqs9bV1ygE_p-q-odMVfnxxMpfK4xe0xdJ-2_-EJpiJ8JF0UsjQk0URTK-gc32H2Noyo3gKtfuGeyupEPtIWxFg9cUjpDS3Gwj_eYGYpoINIP_6L/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJNSyndoyrjMGYPI1u335L03AD1T16JDxCoWYf45C9Mda31uztYwysahGlmbgVTTgFIeopXJtNAMlQjjohvX98Hliknz9pfEoOcRurX09ict77j3X2KTtuiY02kYQj_7xA4KI3f1BN1kXT/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}

[-] Dan Patekan Code Ini Sesuai Selera Kalian  :

<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/halaman fan page facebook/'></a></li>
<li><a class='icon twitter' href='http://twitter.com/username/'></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/alamat feed rss'></a></li>
</ul>