Cara Membuat Widget Social Media Di Sidebar Dengan Efek Berputar

Cara Membuat Widget Social Media Di Sidebar Dengan Efek Berputar

Mendekorasi blog dengan tambahan widget adalah cara yang baik untuk memperindah desain template blog. Tidak hanya memperindah tampilan pada blog, widget ini juga mempunyai peranan yang cukup penting, terutama dalam segi penghubung yakni untuk membantu proses sosialisasi antara Administrator blog dengan user atau visitor.

Pada kesempatan kali ini saya akan membagikan artikel tentang Cara Membuat Widget Social Media Di Sidebar Dengan Efek Berputar, tentunya widget ini bisa membantu sobat blogger untuk bersosialisasi dengan pengunjung blog lewat jejaring sosial seperti Facebook, Twitter, Instagram dan google+. Tertarik untuk membuatnya? baiklah silakan ikuti tutorial berikut ini:

1. Masuk ke Akun Blogger.
2. Pergi ke "Tata Letak", klik "Tambahkan Gadget" lihat gambar di bawah ini.


Tata Letak

Tambahkan Gatget

Add HTML/JavaScript

3. Kemudian Masukan Kode HTML di bawah ini dan ganti URLnya dengan URL akun Social Media kamu  lalu Simpan.
<style>
#social a:hover {
background-color: transparent;
opacity:0.7;
}
#social img {
-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;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center>
<div id="social">


<!-facebook-->
<a title="Facebook" rel="nofollow" href="URL Facebook" target="_blank">
<img style="margin-right:1px;" src="http://icons.iconarchive.com/icons/designbolts/handstitch-social/32/Facebook-icon.png"/></a>
<!--Akhir Kode Facebook-->

<!-twitter-->
<a title="Twitter" rel="nofollow" href="URL Twitter" target="_blank">
<img style="margin-right:1px;" src="http://icons.iconarchive.com/icons/designbolts/handstitch-social/32/Twitter-icon.png"/></a>
<!--Akhir Kode Twitter-->

<!-instagram-->
<a title="Instagram" rel="nofollow" href="URL Instagram" target="_blank">
<img style="margin-right:1px;" src="http://icons.iconarchive.com/icons/designbolts/handstitch-social/32/Instagram-icon.png"/></a>
<!--Akhir Kode Instagram-->

<!-google plus-->
<a title="Google Plus" rel="nofollow" href=URL Google Plus" target="_blank">
<img style="margin-right:1px;" src="http://icons.iconarchive.com/icons/designbolts/handstitch-social/32/Google-Plus-icon.png"/></a>
<!--Akhir Kode Google Plus-->

<!-youtube-->
<a title="YouTube" rel="nofollow" href="URL YouTube" target="_blank">
<img style="margin-right:1px;" src="http://icons.iconarchive.com/icons/designbolts/handstitch-social/32/Youtube-icon.png"/></a>
<!--Akhir Kode YouTube-->

</!-youtube--></!-google></!-instagram--></!-twitter--></!-facebook--></div></center>
Share: Facebook Twitter Google+