Sebelumnya saya sudah banyak membagikan beberapa tutorial tentang cara membuat widget sosial media dalam berbagai bentuk juga, yang ini pasti tidak asing bagi agan-agan karena widget sosial media ini bisa agan temukan di template yang di buat oleh Arlina Design. Karena belum ada tutor cara membuat widget ini, untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat widget social media button dengan efek berputar.
(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)
Pengaturan : Setelah selesai pilih Simpan, kemudian cek widget blog agan.
(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)
Karena kebetulan hobi saya adalah mencari tau bentuk-bentuk CSS terbaru, jadi saya mulai mempelajari widget ini, dan kemudian saya menemukan script untuk membuat widget sosial media ini. Widget sosial media ini tidak membutuhkan JavaScript jadi untuk pemakaiannya cukup simple dan tidak mengurangi kecepatan blog agan.
Berikut adalah tampilan bentuk widget social media button ini. Maaf jika tampilan Gif kurang maksimal.
Sebelumnya saya juga membuat tutorial cara membuat widget social media button flat design, silahkan baca di sini.
(Baca juga : Membuat Widget Social Media Button Flat Design di Blog)
(Baca juga : Membuat Widget Social Media Button Flat Design di Blog)
Selanjutnya untuk langkah-langkah membuat dan memasang widget social media button dengan efek berputar, silahkan ikuti langkah-langkah dari saya berikut ini.
Cara Memasang Widget Social Media Button Efek Berputar
- Langkah pertama masuk ke akun Blogger agan
- Pilih menu Tata Letak, klik Tambahkan Gadget ditempat yang agan inginkan, kemudian pilih HTML/JavaScript
- Masukan Judul widget agan, lalu masukan script di bawah ini pada kolom Konten
<style>
.simplifymedsos a{ transition: all .3s;display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;}
.simplifymedsos a i{font-family:Fontawesome;width:32px;height:32px;line-height:32px;display:block}
.simplifymedsos a:hover{color:#fff;opacity:1;transform:rotate(360deg);}
.simplifymedsos .facebook{background:#3b5998}
.simplifymedsos .twitter{background:#00aced}
.simplifymedsos .googleplus{background:#dd4b39}
.simplifymedsos .rssfeed{background:#ee802f}
</style>
<div class="simplifymedsos">
<a class="facebook" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="twitter" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="googleplus" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a>
<a class="rssfeed" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-rss"></i></a>
</div>- Silahkan ganti www.link-URL-sosial-media-agan.com dengan URL sosial media agan.
- Contoh : https://www.facebook.com/TutorialUmumBlog/
(Baca juga : Cara Membuat Author Box dengan Social Media Buttons)
Demikian tutorial singkat dari saya mengenai cara membuat social media button efek berputar. Jika ada pertanyaan mengenai widget social media button ini, silahkan agan masukan ke dalam kolom komentar.
Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk agan atau sista semua. Untuk tutorial yang lainnya mengenai tutorial blog atau widget blog, silahkan tetap kunjungi blog Tutorial Umum.