Spinning Social Icons With CSS3 For Blogger

Oto Website selalu ingin mencoba membuat sesuatu yang berbeda yang akan bisa menarik pengunjung/pembaca untuk membaca tutorial O.W.
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.

Cara Tambah Spinning Social Icons With CSS3 For Blogger

• 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.

Gaya 1 :

<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/dekrif/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QMXWwccRSfHf3-F06oa_28CbWTYq6rcpHwtrmyCfp6WuM2hH8_WHY1LVtN4Hsic7mBMX08c3RuEr7Y7Vvupt55_LDwGSUhby11wrNkkDEF9fE41xRcR_pjvCZOzMOibp51MSpvFxDA/s1600/otowebsite.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/otowebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWzcMVEx9he0dqz5-q5NcIxKdrdN-UMF7nRXQHVGa8xTiOAdfjtKfaHLKl4zDrIW5d5wFGXV6vKnc1DfTtyi0OJQg3qaBk4a-6U1pGreUdbUCowDD6pBv8pviHtW0SWLDNL-fKQUZPA/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/AVvXsEhEP1FlUc-swTB9nEvzahWYRDohiV9yp9Y9g2i6DE2LxmI13yyn7POKuFEY4peCHEdXKoMRbMVBqplXNuwIXyY92pvc7duim-xC1QcDwkvA2CMKmYhCD065GVxJV-VtjTyFLq10jEN8cA/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/otowebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXj1SY0DgTlApy2KECXjyZZr-NvZOCbb92vDNqQnZUMf6rtKvJL146XiePeXtg70wYBCyullv2mwWCVnw29MItrnCLsJxcMDLzbhrxkkrpOuIgjMLj8LMhbRVLn0wopXhja0xk2fw4Q/s1600/otowebsite.blogspot.com-rss.png" /></a>
<a href="https://www.youtube.com/OtoWebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqTvC3ucJv9dJh3KiU8N9st7SGpopAXp_5kpxTPG_Vb-Kqa13V4c1mPsGMvGkAXQYKxGhJsIaIZ2ToIOsd3AyJHCY0AcVtwPXx2ue9NWCZcGmlQClZUyM8rrezhMy6LfRT9w3qSzAfg/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

Gaya 2 :

<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/dekrif/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QMXWwccRSfHf3-F06oa_28CbWTYq6rcpHwtrmyCfp6WuM2hH8_WHY1LVtN4Hsic7mBMX08c3RuEr7Y7Vvupt55_LDwGSUhby11wrNkkDEF9fE41xRcR_pjvCZOzMOibp51MSpvFxDA/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/otowebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWzcMVEx9he0dqz5-q5NcIxKdrdN-UMF7nRXQHVGa8xTiOAdfjtKfaHLKl4zDrIW5d5wFGXV6vKnc1DfTtyi0OJQg3qaBk4a-6U1pGreUdbUCowDD6pBv8pviHtW0SWLDNL-fKQUZPA/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/AVvXsEhEP1FlUc-swTB9nEvzahWYRDohiV9yp9Y9g2i6DE2LxmI13yyn7POKuFEY4peCHEdXKoMRbMVBqplXNuwIXyY92pvc7duim-xC1QcDwkvA2CMKmYhCD065GVxJV-VtjTyFLq10jEN8cA/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/otowebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXj1SY0DgTlApy2KECXjyZZr-NvZOCbb92vDNqQnZUMf6rtKvJL146XiePeXtg70wYBCyullv2mwWCVnw29MItrnCLsJxcMDLzbhrxkkrpOuIgjMLj8LMhbRVLn0wopXhja0xk2fw4Q/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/OtoWebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqTvC3ucJv9dJh3KiU8N9st7SGpopAXp_5kpxTPG_Vb-Kqa13V4c1mPsGMvGkAXQYKxGhJsIaIZ2ToIOsd3AyJHCY0AcVtwPXx2ue9NWCZcGmlQClZUyM8rrezhMy6LfRT9w3qSzAfg/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

Gaya 3 :

<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/dekrif/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QMXWwccRSfHf3-F06oa_28CbWTYq6rcpHwtrmyCfp6WuM2hH8_WHY1LVtN4Hsic7mBMX08c3RuEr7Y7Vvupt55_LDwGSUhby11wrNkkDEF9fE41xRcR_pjvCZOzMOibp51MSpvFxDA/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/otowebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWzcMVEx9he0dqz5-q5NcIxKdrdN-UMF7nRXQHVGa8xTiOAdfjtKfaHLKl4zDrIW5d5wFGXV6vKnc1DfTtyi0OJQg3qaBk4a-6U1pGreUdbUCowDD6pBv8pviHtW0SWLDNL-fKQUZPA/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/AVvXsEhEP1FlUc-swTB9nEvzahWYRDohiV9yp9Y9g2i6DE2LxmI13yyn7POKuFEY4peCHEdXKoMRbMVBqplXNuwIXyY92pvc7duim-xC1QcDwkvA2CMKmYhCD065GVxJV-VtjTyFLq10jEN8cA/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/otowebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXj1SY0DgTlApy2KECXjyZZr-NvZOCbb92vDNqQnZUMf6rtKvJL146XiePeXtg70wYBCyullv2mwWCVnw29MItrnCLsJxcMDLzbhrxkkrpOuIgjMLj8LMhbRVLn0wopXhja0xk2fw4Q/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/OtoWebsite/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqTvC3ucJv9dJh3KiU8N9st7SGpopAXp_5kpxTPG_Vb-Kqa13V4c1mPsGMvGkAXQYKxGhJsIaIZ2ToIOsd3AyJHCY0AcVtwPXx2ue9NWCZcGmlQClZUyM8rrezhMy6LfRT9w3qSzAfg/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

Saya harap Anda suka dengan tutorial kali ini, Jangan lupa untuk memfollow Oto Website agar Anda tidak ketinggalan tutorial lainnya dan dari tempat saya mengucapkan selamat menikmati. Salam Blogger!