Untuk hari ini dan dalam Artikel ini kita akan mencoba bermain dengan beberapa sifat sederhana CSS3 seperti -moz-transform dan membuat widget sosial yang sederhana dengan CSS3 widget effect.
Widget ini pasti akan membantu Anda untuk meningkatkan jumlah pelanggan sosial juga akan menarik pembaca Anda dan diperebutkan perhatian pengunjung. Widget ini membawa mereka berputar (berputar) beberapa derajat dan ketika mouse di atasnya mereka kembali ke posisi semula, efek ini disebabkan oleh properti CSS3 yang telah saya sebutkan di atas. Untuk melihat demo dan cara menambahkan Spinning Social Icons With CSS3 For Blogger silahkan Anda lihat di bawah ini.

• Memilih gaya.
• Salin kode.
• Ganti nama pengguna saya dengan Anda.
• Pergi ke Blogger Dasbor >> Laman.
• Klik Tambah Gadget.
• Pilih HTML / JavaScript.
• Paste kode Anda dan simpan.

<style>p#OW_socialicons img {
/* Spinning Social Icons Widget By Oto Website */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

p#OW_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}

/* Spinning Social Icons Widget By Oto Website */
</style>



<center><p id="OW_socialicons">
<a href="http://www.facebook.com/apricyber/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgdjWgpCr-xJLSf78tQTUxN3FTfsSxq6GpcM4ylK1Vw7Y5Lrlw6m5fjpQV2BznSCLuVMgKvB56xtyiGFa6oXETJTnf3MTO8ylUy3lLyO0FlDEB8bgiBMeRyHUR03Tvx1_31exK8iBig/s1600/otowebsite.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/apricyber/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4JyF9Wk0iTOMCQimIrjmdLRPRKeu4TmS_A2pDi1ZGrTgFnYcErKo6anfLDu7c7x3G2EBAumgLYlVDfZ8nFfZ2kU_Bh3P5u52Jmq8spnFKPKk_moRcsoTxGEzxRHhQjmxdvRNAjIuDQ/s1600/otowebsite.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/108563074507885886647">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqk6w2yE5fVC0AwyjYDefCcvdrx70GMr8T_3qdD_njZG7ICLQSH9-4BAd2sKKGAC8DufePVGQyNjOXSZRMJDsiAUenyx6sHEw05WeUdRMhdVBWxTNge8BFzv1qUYNn6uZooqcGvkN8w/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/apricyberdotcom/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimJLIgT7b-eg_1s6zPh1bjhp_Nd_cBZaqPyf-0AsExliRgP_vVc8JpmmpUSuvBavypZmPt-tp2mrCVSnXexnZqbIQ1pZiTe5sFrYF_rjMr9PQWTu-PWo7wfihOMRauKjFSC0CSv3K-Q/s1600/otowebsite.blogspot.com-rss.png" /></a>
<a href="https://www.youtube.com/palmedaprianto/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0TD311rRGUfz5gtAJudruFAYZOkeQOUIrn0l1uiiw8xUkjcqNAiGhRAOES6wBfAivejOukt42qs7gOmmtZveGTWpmmikFVJBZ4FMIehFTQKfHvAZIgsoLieWAR1Ej7DSYIdBXc97Yw/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

<style>p#OW_socialicons img {
 /* Spinning Social Icons Widget By Oto Website */
    -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#OW_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By Oto Website */
</style> 



<center><p id="OW_socialicons">
    <a href="http://www.facebook.com/apticyber/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgdjWgpCr-xJLSf78tQTUxN3FTfsSxq6GpcM4ylK1Vw7Y5Lrlw6m5fjpQV2BznSCLuVMgKvB56xtyiGFa6oXETJTnf3MTO8ylUy3lLyO0FlDEB8bgiBMeRyHUR03Tvx1_31exK8iBig/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/apricyber/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4JyF9Wk0iTOMCQimIrjmdLRPRKeu4TmS_A2pDi1ZGrTgFnYcErKo6anfLDu7c7x3G2EBAumgLYlVDfZ8nFfZ2kU_Bh3P5u52Jmq8spnFKPKk_moRcsoTxGEzxRHhQjmxdvRNAjIuDQ/s1600/otowebsite.blogspot.com-twitter.png" /></a>
    <a href="https://plus.google.com/108563074507885886647">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqk6w2yE5fVC0AwyjYDefCcvdrx70GMr8T_3qdD_njZG7ICLQSH9-4BAd2sKKGAC8DufePVGQyNjOXSZRMJDsiAUenyx6sHEw05WeUdRMhdVBWxTNge8BFzv1qUYNn6uZooqcGvkN8w/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/palmed aprianto/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimJLIgT7b-eg_1s6zPh1bjhp_Nd_cBZaqPyf-0AsExliRgP_vVc8JpmmpUSuvBavypZmPt-tp2mrCVSnXexnZqbIQ1pZiTe5sFrYF_rjMr9PQWTu-PWo7wfihOMRauKjFSC0CSv3K-Q/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/palmed aprianto/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0TD311rRGUfz5gtAJudruFAYZOkeQOUIrn0l1uiiw8xUkjcqNAiGhRAOES6wBfAivejOukt42qs7gOmmtZveGTWpmmikFVJBZ4FMIehFTQKfHvAZIgsoLieWAR1Ej7DSYIdBXc97Yw/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

<style>p#OW_socialicons img {
 /* Spinning Social Icons Widget By Oto Website */
    -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#OW_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

/* Spinning Social Icons Widget By Oto Website */
</style>



<center><p id="OW_socialicons">
    <a href="http://www.facebook.com/apricyber/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgdjWgpCr-xJLSf78tQTUxN3FTfsSxq6GpcM4ylK1Vw7Y5Lrlw6m5fjpQV2BznSCLuVMgKvB56xtyiGFa6oXETJTnf3MTO8ylUy3lLyO0FlDEB8bgiBMeRyHUR03Tvx1_31exK8iBig/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/apricyber/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4JyF9Wk0iTOMCQimIrjmdLRPRKeu4TmS_A2pDi1ZGrTgFnYcErKo6anfLDu7c7x3G2EBAumgLYlVDfZ8nFfZ2kU_Bh3P5u52Jmq8spnFKPKk_moRcsoTxGEzxRHhQjmxdvRNAjIuDQ/s1600/otowebsite.blogspot.com-twitter.png" /></a>
    <a href="https://plus.google.com/108563074507885886647">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqk6w2yE5fVC0AwyjYDefCcvdrx70GMr8T_3qdD_njZG7ICLQSH9-4BAd2sKKGAC8DufePVGQyNjOXSZRMJDsiAUenyx6sHEw05WeUdRMhdVBWxTNge8BFzv1qUYNn6uZooqcGvkN8w/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/palmed aprianto/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimJLIgT7b-eg_1s6zPh1bjhp_Nd_cBZaqPyf-0AsExliRgP_vVc8JpmmpUSuvBavypZmPt-tp2mrCVSnXexnZqbIQ1pZiTe5sFrYF_rjMr9PQWTu-PWo7wfihOMRauKjFSC0CSv3K-Q/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/palmed aprianto/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0TD311rRGUfz5gtAJudruFAYZOkeQOUIrn0l1uiiw8xUkjcqNAiGhRAOES6wBfAivejOukt42qs7gOmmtZveGTWpmmikFVJBZ4FMIehFTQKfHvAZIgsoLieWAR1Ej7DSYIdBXc97Yw/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

Do you like this article? Share It!