19 September 2017

Cara Membuat Widget Social Media Button Efek Berputar

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)

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.
Cara Membuat Widget Social Media Button Efek Berputar

Berikut adalah tampilan bentuk widget social media button ini. Maaf jika tampilan Gif kurang maksimal.
Widget Media Sosial Keren untuk Blogspot


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>
  • Pengaturan :
  • Setelah selesai pilih Simpan, kemudian cek widget blog agan.
    Cara Memasang Widget Media Sosial di Sidebar Blog


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.

1 comments:

jadinya keren gan, thanks tutorialnya

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon