Memasang Widget Social Media Icons Dengan CSS ~ Ron1st Blog

Berbeda Pada Widget Sosial Media Yang Pernah Saya Bagikan Widget ini Memiliki Effect Hover pada Setiap Sosial icons dan widget ini Memiliki Tampilan yang Menarik dan Elegan.

Langsung Saja Kita coba Membuatnya, Kalau Sobat Tertarik Dan Ingin Mempratekannya Tutorialnya Seperti di Bawah ini.

Pertama, Login Ke Blogger.com
Setelah Login Dan Berada di Dasbor Blogger, Sekarang Klik Menu ''Tata Letak''
Setelah itu Klik ''Tambah Gadget''
Pilih Gadget ''HTML/JavaScript''
Terus, Copy kode dibawah ini di dalam Gadget Tadi

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="www.facebook.com/Username" target="_blank">Facebook</a></li> <li><a class="twitter" href="www.twitter.com/Username" target="_blank">Twitter</a></li> <li><a class="google-p" href="https://plus.google.com/USER ID ANDA" target="_blank">Google plus</a></li> <li><a class="rss" href="feeds.feedburner.com/GhiyatsBlogs" target="_blank">Rss</a></li> </ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAZoxlARuTTs55kRcGA1CUy_p1jQbRmTAg2G1fQKyrzbGz6nH31SZjYZzkepWP5oD-8SDwbgcaUVByJxwnX2-uLKUVmvG3G9Xd9Y64ho1pItI7v2AvVt_ROrL9Bhy7ASsxQbwqxmFQA/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAZoxlARuTTs55kRcGA1CUy_p1jQbRmTAg2G1fQKyrzbGz6nH31SZjYZzkepWP5oD-8SDwbgcaUVByJxwnX2-uLKUVmvG3G9Xd9Y64ho1pItI7v2AvVt_ROrL9Bhy7ASsxQbwqxmFQA/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhweAtlmjMznqM6stYUhP-DV-tUJZGQEiZK5CwGn1ROi4Ar6DCn5ERHz5jhm5JQRGprFxXQ6-fPR861ySwL83Wm0zYYqHjt0Aig6_8_ljiHh6-42x78rIdPQg315JwVAfPBa9sN9dfN1w/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhweAtlmjMznqM6stYUhP-DV-tUJZGQEiZK5CwGn1ROi4Ar6DCn5ERHz5jhm5JQRGprFxXQ6-fPR861ySwL83Wm0zYYqHjt0Aig6_8_ljiHh6-42x78rIdPQg315JwVAfPBa9sN9dfN1w/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7LtbLGaboS0P9LDeGdZfn4s3N8twyTE9ryJCuaU2qW2Z8ZngzX3-VEtbZT4OFhCNMWNQv5cCzmnkS7XC6ImjtDgMbOHXD9GF3W5MVNVehX0EXv-Scg7k4TfJaEa47NueOaP2G_Wm6w/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7LtbLGaboS0P9LDeGdZfn4s3N8twyTE9ryJCuaU2qW2Z8ZngzX3-VEtbZT4OFhCNMWNQv5cCzmnkS7XC6ImjtDgMbOHXD9GF3W5MVNVehX0EXv-Scg7k4TfJaEa47NueOaP2G_Wm6w/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy5oLkg5y_2WJfiohcXeoFOsUBELn-iWx3gf0OAoKMLgcmG_EKzOYXSAAX2mL0cg_4GeqfaeVWOJUJdK9CpBflJUPPbtyxdgNoZU6FJKBcKDN3heJBjcYCIR9-5QY1jMMgdbxwUUrZ5A/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy5oLkg5y_2WJfiohcXeoFOsUBELn-iWx3gf0OAoKMLgcmG_EKzOYXSAAX2mL0cg_4GeqfaeVWOJUJdK9CpBflJUPPbtyxdgNoZU6FJKBcKDN3heJBjcYCIR9-5QY1jMMgdbxwUUrZ5A/s1600/twitter.png) no-repeat 0 0}
</style>