Hari ini saya akan menunjukkan bagaimana anda dapat menambahkan ikon sliding sosial keren dengan efek hover ke blog blogger anda. tombol ini memiliki efek hover benar-benar keren.
Tombol-tombol ini dibuat dengan CSS tanpa menggunakan coding JavaScript. Kode telah dioptimalkan untuk memuat lebih cepat.
Tombol-tombol ini menarik dan efek hover membuat Blogs tambah mengagumkan.Ketika melayang kita bisa melihat efek geser dan perubahan tombol gambar.
Sebuah demo kerja live widget ini bisa dilihat di bawah.
Setelah Anda telah melihat demo kita bisa melanjutkan dengan tutorial untuk menambahkan widget ini ke blog blogger Anda.
Untuk menambahkan widget ini di blog Anda pergi ke Blog Judul → Tata Letak → Tambah Widget → HTML / JavaScript dan paste kode di bawah di dalam kotak.
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" 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/AVvXsEiTZ0sgIkaOVAnL5LUJr9PhThhXYZCU32PW1CLmUBSaBUGwv1V2nNlFatHVnsgdmOHGP2aCettcXNByQVN0GIPlAgQqEUcPSvsrDF56B1H_h3X7FyMrCqDwWW47xvRjoPAUY8KtRe_rdw/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZ0sgIkaOVAnL5LUJr9PhThhXYZCU32PW1CLmUBSaBUGwv1V2nNlFatHVnsgdmOHGP2aCettcXNByQVN0GIPlAgQqEUcPSvsrDF56B1H_h3X7FyMrCqDwWW47xvRjoPAUY8KtRe_rdw/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgAhVeG4R9kO2RgguOHXEllAhEs9fjoSXEdVDuBXQQ-MEOc2gGB3Rg_1nG86Kqs6RR9ZXe8FzpKDogb5g8e75tkC-HatKEa6hhUHh9QvE69F_AOcp0ETpxhl8Rl3o9tl8MdrS95fiow/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgAhVeG4R9kO2RgguOHXEllAhEs9fjoSXEdVDuBXQQ-MEOc2gGB3Rg_1nG86Kqs6RR9ZXe8FzpKDogb5g8e75tkC-HatKEa6hhUHh9QvE69F_AOcp0ETpxhl8Rl3o9tl8MdrS95fiow/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwO7QHMf93TPZb2sWrUPeY7rCmYXrlth5AMCTGdhbBde9ECry0ijbfdF031otg_hN8AeyxD5p9gc0fW7gfiPgexrBS1iuLeIYjqu1OEl6bNyTvY2Zxy72EgXwyS8tpxVVIcFL85HLmg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwO7QHMf93TPZb2sWrUPeY7rCmYXrlth5AMCTGdhbBde9ECry0ijbfdF031otg_hN8AeyxD5p9gc0fW7gfiPgexrBS1iuLeIYjqu1OEl6bNyTvY2Zxy72EgXwyS8tpxVVIcFL85HLmg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFml2jXT1K6CyurIIsqSx7KOVYTri9uWj0fTZHdIXx9DtrDsBKpo4N329Rq7vzpprbk27U2x-qgqe-7XbFp2SY8yK5HtZvdfxso-T1J9LLnBCi_DKN_39ZLRRVaAXtuaD98icKcR6cYw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFml2jXT1K6CyurIIsqSx7KOVYTri9uWj0fTZHdIXx9DtrDsBKpo4N329Rq7vzpprbk27U2x-qgqe-7XbFp2SY8yK5HtZvdfxso-T1J9LLnBCi_DKN_39ZLRRVaAXtuaD98icKcR6cYw/s1600/twitter.png) no-repeat 0 0}
</style>
Anda selesai sekarang. Sekarang Anda dan pengunjung Anda dapat melihat ini mengagumkan geser ikon sosial dengan efek Hover di blog blogger Anda.
Posted by
Unknown, Published at
5:49 AM and have
0
comments