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="http://2.bp.blogspot.com/-pGc7eo8DaM8/UJtql6NGS2I/AAAAAAAAF2s/0M4nsVu71gY/s1600/otowebsite.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/otowebsite/">
<img border="0" src="http://4.bp.blogspot.com/-kXkcQB6bIfM/UJtqovidESI/AAAAAAAAF3A/NPP4NgIEQCA/s1600/otowebsite.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/115780777398536909642">
<img border="0" src="http://3.bp.blogspot.com/-_3tPp6j4MU4/UJtqmymGEeI/AAAAAAAAF20/wI-KqoTBl48/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/otowebsite/">
<img border="0" src="http://2.bp.blogspot.com/-Hj6BV8333ME/UJtqnkUCAWI/AAAAAAAAF28/MT5lardLzw0/s1600/otowebsite.blogspot.com-rss.png" /></a>
<a href="https://www.youtube.com/OtoWebsite/">
<img border="0" src="http://2.bp.blogspot.com/--QkRakIFB1A/UJtqpdsT_LI/AAAAAAAAF3M/HkcnUtWGBUw/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="http://2.bp.blogspot.com/-pGc7eo8DaM8/UJtql6NGS2I/AAAAAAAAF2s/0M4nsVu71gY/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/otowebsite/">
<img border="0" src="http://4.bp.blogspot.com/-kXkcQB6bIfM/UJtqovidESI/AAAAAAAAF3A/NPP4NgIEQCA/s1600/otowebsite.blogspot.com-twitter.png" /></a>
    <a href="https://plus.google.com/115780777398536909642">
<img border="0" src="http://3.bp.blogspot.com/-_3tPp6j4MU4/UJtqmymGEeI/AAAAAAAAF20/wI-KqoTBl48/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/otowebsite/">
<img border="0" src="http://2.bp.blogspot.com/-Hj6BV8333ME/UJtqnkUCAWI/AAAAAAAAF28/MT5lardLzw0/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/OtoWebsite/">
<img border="0" src="http://2.bp.blogspot.com/--QkRakIFB1A/UJtqpdsT_LI/AAAAAAAAF3M/HkcnUtWGBUw/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="http://2.bp.blogspot.com/-pGc7eo8DaM8/UJtql6NGS2I/AAAAAAAAF2s/0M4nsVu71gY/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/otowebsite/">
<img border="0" src="http://4.bp.blogspot.com/-kXkcQB6bIfM/UJtqovidESI/AAAAAAAAF3A/NPP4NgIEQCA/s1600/otowebsite.blogspot.com-twitter.png" /></a>
    <a href="https://plus.google.com/115780777398536909642">
<img border="0" src="http://3.bp.blogspot.com/-_3tPp6j4MU4/UJtqmymGEeI/AAAAAAAAF20/wI-KqoTBl48/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/otowebsite/">
<img border="0" src="http://2.bp.blogspot.com/-Hj6BV8333ME/UJtqnkUCAWI/AAAAAAAAF28/MT5lardLzw0/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/OtoWebsite/">
<img border="0" src="http://2.bp.blogspot.com/--QkRakIFB1A/UJtqpdsT_LI/AAAAAAAAF3M/HkcnUtWGBUw/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!

Poskan Komentar Blogger Disqus

  1. berkunjung kemari, sambil baca artikel menarik ini :)

    BalasHapus
  2. This widget will surely help you to increase number of social subscribers also it will attract your readers and grabs visitors attention quickly.Thanks for sharing nice post.
    website design

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top