Cara Membuat Social Icon Dengan CSS3

kevinservis TIPS BLOG 27 Mar 2013

Tips blog kali ini bisa meningkatkan jumlah pelanggan social media sobat. Bukan tidak mungkin, karena tombol social icon ini penampilan nya sangat menarik yang membuat kita gatal untuk mengkliknya..hehee..Sesuai dengan judulnya Cara Membuat Social Icon Dengan CSS3, widget social ini memang menggunakan CSS3 yang membuat penampilanya menjadi sangat menarik. Untuk Live demo nya coba lihat dibawah ini :

Bagaimana sob ? keren gak ?..Kalau sobat tertarik ingin membuat nya, cara nya sangat mudah. Silahkan copy paste kode dibawah ini ke add gadget HTML blog sobat :

<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/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFZPNsWtJfsnkqqVCq4W6-2LXJwwvoJklRcHz2og97UmRXan64P3wHsTxB3585ZEe_ktlGhgm06PiWb6SkD-Y2jQRDSSf9da91SOZY06dYqQyFJzwDU3M3ncuikWHoz-Tz7TLCoFltUw/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOtOswn5J-Y4W4vdXuVml8xhRYHNp8s34Wc4H8LXLOkpSXtMevlyQv8eerIpYrc1bjdGQBMunx9MNzgzzPKbw7QVtmaftnTP0Bpdd9W2KrhF63hyphenhyphenD-koaoth6SyDo4SAduoas5AJM4mQ/s1600/otowebsite.blogspot.com-twitter.png" /></a>
    <a href="https://plus.google.com/115780777398536909642">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh19NKEh65QHNlk8Cuq3wmM4JVxsnXankEUB0cTWWWCKkswzmMHnJlN2vcwOESRA9liAiHRCkSfHe0CQYYggyFchSSVNc2uZYBkmyDJlOapeecX7FTMcUJqG_ASeg01o3zC9P57b41Rmg/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhY02DrXPO30AfDKP04fz2eljTqEd5o6dEBUXhMibWqQNoT2BNOaX13fBqpJ_bmEHZaFLyTJblDKarDPKP_-ulWrhOUL4g1Qu3ZDzffHF8027Mt3ValDX94M4hKYFuw4mlVjHFbNJBw/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcwdFr7X_ZBEM1pFsa1bWt5cwg3rccCfzvbquMLAYjoE8os1Nne82Y_hwdEnSu3sxUrLP1LJZG0xT56MEt5ZEby7Kv_yNzT0zmlRH_nh-DUq-mTrhOAmOySqCVdma3N-Mr1lLXK-uy4Q/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

Note : Silahkan di ganti URL social media yang saya beri warna diatas, dengan milik sobat sendiri.

Cukup sekian sob. Terima kasih telah membaca artikel Cara Membuat Social Icon Dengan CSS3.

Semoga bermanfaat.