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..
[-] 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>
