Rotating 3D Social Media Icon

Assalamu'alaikum Wr.Wb.

Share posting Go Blog Go akan membahas Share Social Media Icon yang dapat berputar apabila Logo Image-nya disorot oleh mouse, Script yang dipakai Murni hanya menggunakan CSS tanpa Javascript. Seperti apa cara-nya, lihat sendiri cara-nya :

Login ke Blogger
Klik Monetize -> Layout -> Add Gadget (HTML/Javascript Gadget)
Masukkan Kode berikut ini kedalam Kotak Gadget, disini Go Blog Go memberi 2 macam untuk Ukuran Dimensi Icon-nya
Untuk Ukuran Icon 64 x 64

<style type='text/css'>
p#wwy_socialicons img {
    -moz-transition: all 0.8s ease-in-out;   
 -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#wwy_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>
<center>
<p id="wwy_socialicons">
<a href="http://www.facebook.com/wong-wayang-facebook">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPECpuowwjzvdbnKt2E_j0aCkayFr64pw_Ym7ubr9Z9IQc9bjszYrRE9lw2ULZkluJyOYaMgd1hCwTsUeznFME62Bdg607VPoaoKmQxKZYuYV0pV0XJ4wWCs3Yw0CAmeak1TUm7X8D1Ng7/s1600/wongwayangFB.png" /></a>
<a href="https://plus.google.com/wong-wayang-ID-Google+">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKKHsi-MSQ_CFL21aOjrp3b6RMGly7fmD5AiZL_NqXtxYlrd98oqiZZEKB3stMyXglVqLKO8fjW2eKm8esrFATRoM-Zv5tLOzZoEO7BwMC1-NwidB9HD1QM3BMCmUSWTHe44YaI5GQMJl8/s1600/wongwayangGP.png" /></a>
<a href="http://www.twitter.com/wong-wayang-twitter">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC_UoV-3OmazcVJX99MhgAP7shbE7va2D5N9eAS2-9qRq1yyW_MeG9OpRRcmouh9FFZSJ-LPvnj-afz7DE5sXwlqsfd2-ceTGQHAuBkCOYKOkivxjFmCiGZ0ovqzMr1WHwCT8qnJ-23ThO/s1600/wongwayangTW.png" /></a>
<a href="http://pinterest.com/wong-wayang-pinterest">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1s04egechrMmNObBRPQuKC2uRqYpLNFEo7QXmBDPyWusQATpLRvmxPWe2Yf-aZpg8C89CMGpJzHui4IHu38YcJZseEV3dfhNlc7nyZIlQJ9cK6HcWqcMElPbHz7rNaDj0VpruLWbRSkN/s1600/wongwayangPT.png" /></a>
<a href="http://www.feeds.feedburner.com/wong-wayang-feedburner">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhWvhyphenhyphenC49CXc2-5_VB-v7N8lNnGQDuqY67KacuApHeEQKFzIcvgFWFG9timkRjOr6KuvAN8vO6oSZBEFUSJ9hbY7JyYg_87remYGEpyg2l2VgI4zQwlQixg5uKtqnYtg-yFl1guLS1Nmwu/s1600/wongwayangRSS.png" /></a>
</p>
</center>

Untuk Ukuran Icon 48 x 48

<style type='text/css'>
p#wwy_socialicons img {
    -moz-transition: all 0.8s ease-in-out;   
 -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#wwy_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>
<center><p id="wwy_socialicons">
<a href="http://www.facebook.com/wong-wayang-facebook">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyj9SVeCD_zm-GAicvy9_mG59ND0Nf3eXCzEHebASdqCiaInaHTNGfv2FYAyovz9VVyxgquZTK2G8CkE2zglOX0NcL3dB9lbjeXVrjN-3veSbvoA8H8BlwGfRNDLOO71TFC9yz6c17oj8L/s1600/wongwayang48FB.png" /></a>
<a href="https://plus.google.com/wong-wayang-ID-Google+">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50_6yZVHPGHJiz_6jHdXsOHGICTOVHkeuNXZaFLv24pxW2eO1krvNiCV160EkOLfXA3nrKNLduOtHLc9z4Ld-ak5yAx77loAxR6FTEKi34FkEg5pfmZatrcJX-kihg3ufkHoRTjVOlpOK/s1600/wongwayang48GP.png" /></a>
<a href="http://www.twitter.com/wong-wayang-twitter">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj11t5UahAauWpaOAdPyW01T_8-xI6Eg8qdSIxldzadlgmEYmqgrJuuh-66rUDyMDr0DgxPM8Q2BnGbtChxHe-mwj6GhJ-iVXuJI0wnd6N3wVXq5D1iAEsXzEXF-TibmnkPfVX-YcEG_ASG/s1600/wongwayang48TW.png" /></a>
<a href="http://pinterest.com/wong-wayang-pinterst">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT7S-YwxWmhkaQK1FtPBu1fLFKwq3vUz5kR0h32dykjhwtndwRcqBVJDnzqNiGM8adlZ17d88gGAzAXRAvWsYWSWZ5b5iAoMeA0AR7u7hyphenhyphenJ_mSd2cJ9zZa5JQGrYfJqIIF8J9tTAaLsDx4/s1600/wongwayang48PT.png" /></a>
<a href="http://www.feeds.feedburner.com/wong-wayang-feedburner">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho8yg0f37qFOaH221cC9WhY63PDur0R5qxf5V2CTHkmWrjVUbpmK5UZkDxkWv6xXdSQw9cmusQOxXa64EcyO31MQ0LEFyEhVeLNAMIVKhVLm3x-c8a1dJuU6v6PWRteh7tYGcGNj5At8iS/s1600/wongwayang48RSS.png" /></a>
</p></center>

Save dan Preview
DOWNLOAD
Semoga share posting ini bisa membawa manfaat buat Mojang dan Bujang. Go Blog Go...!!! Amiin

Wassalam,