Memasang Widget Social Media Icons Dengan CSS

Memasang Widget Social Media Icons Dengan CSS | Ghiyats Blogs - Hai, Sob. Salam Untuk Sobat Semua.. Pada Artikel Yang Akan saya Bagikan ini Saya akan Bagikan Sebuah Widget Keren dan Elegan Tentang Sosial Media.

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/AVvXsEgKW_U6t-MB3W-jnTlKXWCam0cBh0s2ijklRL6en3WktPGv5fFWxfgV5t3JH1XuIPr-ut-j4ljVnGq1PGSkppl4FLHzIa65-tedVavJq0JJAiXjVddAQ4mY24umlU40FM1ZalK6gF_RPA/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKW_U6t-MB3W-jnTlKXWCam0cBh0s2ijklRL6en3WktPGv5fFWxfgV5t3JH1XuIPr-ut-j4ljVnGq1PGSkppl4FLHzIa65-tedVavJq0JJAiXjVddAQ4mY24umlU40FM1ZalK6gF_RPA/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmgML0xGhPVII7o5PVMXpMqlyNz47tziH7HKkWdAiLi1kqVnGqHpD4ea71B6FDYnSPDbYoveu0Y5gq043l0TT-paEg38rETtgnhL2HhGzpYcy4DEjtREyjCQxYyWgxyej7oSuVdSp2g/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmgML0xGhPVII7o5PVMXpMqlyNz47tziH7HKkWdAiLi1kqVnGqHpD4ea71B6FDYnSPDbYoveu0Y5gq043l0TT-paEg38rETtgnhL2HhGzpYcy4DEjtREyjCQxYyWgxyej7oSuVdSp2g/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KdXfbcRR05KHOc5JW4n2znf48mpvUd6UrigzvNE58PhSOUI7WQB63RJH3hvdcFqoJ6sv2Drb6Xh-RDTu5kSwfFj1BD7lYH0-QeDLJi0KfVus6cEwe82oRnk40zq1gPwBYRfjApccsg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KdXfbcRR05KHOc5JW4n2znf48mpvUd6UrigzvNE58PhSOUI7WQB63RJH3hvdcFqoJ6sv2Drb6Xh-RDTu5kSwfFj1BD7lYH0-QeDLJi0KfVus6cEwe82oRnk40zq1gPwBYRfjApccsg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yA82TOyWWBN_Sw3tPuwJb0QQyc9F8QrKsb7YvvfLPerg_BOyG1OaBepOVqFeo1xXj-a0orNKatNZ2vyP7VNrwxpFQtZy81ZE0eNADXwF6X-1h6qh14TrUyhICAl_rJyCBlbjxLPXHA/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yA82TOyWWBN_Sw3tPuwJb0QQyc9F8QrKsb7YvvfLPerg_BOyG1OaBepOVqFeo1xXj-a0orNKatNZ2vyP7VNrwxpFQtZy81ZE0eNADXwF6X-1h6qh14TrUyhICAl_rJyCBlbjxLPXHA/s1600/twitter.png) no-repeat 0 0}
</style>

• Ganti Username Dengan Username Facebbok Anda
• Ganti Username Dengan Username Twitter Anda
• Ganti USER ID ANDA Dengan ID Profile Google Plus Anda
• Ganti GhiyatsBlogs Dengan ID Feed Burner Anda
• Setelah Semua  Di Ganti, Sekarang Simpan Gadgetnya

Demikianlah Artikel ini Mudah Bukan Caranya ? Semoga artikel yang saya bagikan ini Bermanfaat dan mudah di Pratekkan oleh sobat semua, Kalau ada yang Belum Di mengerti Tentang Artikel ini, Silakan Berkomentar di kolom komentar dibawah ini, Terima Kasih...

Via : All Blogger Tricks

Happy Blogging