Hari ini saya akan menunjukkan bagaimana Anda dapat menambahkan ikon keren Sliding Sosial dengan efek Hover ke Blogger / Blogspot blog. Tombol ini memiliki efek hover benar-benar keren.
Tombol-tombol ini dibuat dengan CSS tanpa menggunakan JavaScript coding. Kode telah dioptimalkan untuk memuat lebih cepat. Tombol-tombol ini menarik dan efek hover mereka membuat mereka mengagumkan. Ketika melayang kita bisa melihat efek geser dan mengubah pada gambar tombol. Sebuah demo kerja live widget ini dapat dilihat di bawah.
Setelah Anda telah melihat demo kita dapat melanjutkan dengan tutorial untuk menambahkan widget ini ke blog blogger Anda.
Menambahkan HTML / CSS melalui Tata Letak
Untuk menambahkan widget ini ke dalam blog 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/AVvXsEjjCygRH76Qxuf5pNlCgXjWqGoP-lnqDJXbrQZnPNTKhllzee85EcHzWhtj-EXHvgHnOU82sMCFDJUkWmjwRiAdc6vLjid-9c_EFB-Ys9cXylbumPxMIs8InnJwrklDpJkU_P3qCYgwgg/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjCygRH76Qxuf5pNlCgXjWqGoP-lnqDJXbrQZnPNTKhllzee85EcHzWhtj-EXHvgHnOU82sMCFDJUkWmjwRiAdc6vLjid-9c_EFB-Ys9cXylbumPxMIs8InnJwrklDpJkU_P3qCYgwgg/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZAJ3i273hgLy7DGzLC7_ZklujMhxVBfDQQPgVQgVTk6kimUQpt3fv0iSrqTbZPYFCZOL0XjEJSbE1e-tcz-50_OFh1_kmxTXQvOK9PsFrVhIij_4hftziXPatAFBy2kmkjwNFSpwNw/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZAJ3i273hgLy7DGzLC7_ZklujMhxVBfDQQPgVQgVTk6kimUQpt3fv0iSrqTbZPYFCZOL0XjEJSbE1e-tcz-50_OFh1_kmxTXQvOK9PsFrVhIij_4hftziXPatAFBy2kmkjwNFSpwNw/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj76h7unEfjA3Kktb7hr1V0kLiRNPFFZ4bRu_xJDT5Q07Q-b0dk04E3NrK5IabUgjW7C8Ho9kcf6F9_odclcpLVzZPeeG6-HZTAZVK7bJF_QNVzmUKHjjmVksFde8AYYe6mhEr765BFWg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj76h7unEfjA3Kktb7hr1V0kLiRNPFFZ4bRu_xJDT5Q07Q-b0dk04E3NrK5IabUgjW7C8Ho9kcf6F9_odclcpLVzZPeeG6-HZTAZVK7bJF_QNVzmUKHjjmVksFde8AYYe6mhEr765BFWg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7TM_29Sl5okXSt2S3LgZL83N5CNcgoZyE4o4_fsDTVy_88laenXmb32tAJSjWjng3ke_ksjnknvqzXLNECYMUz48XX8JJWS1pLIsdIOgZFcIdrEnAPQ95TUCxzEOkzAKyDmKhDZ-1VQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7TM_29Sl5okXSt2S3LgZL83N5CNcgoZyE4o4_fsDTVy_88laenXmb32tAJSjWjng3ke_ksjnknvqzXLNECYMUz48XX8JJWS1pLIsdIOgZFcIdrEnAPQ95TUCxzEOkzAKyDmKhDZ-1VQ/s1600/twitter.png) no-repeat 0 0}
</style>
Setelah menambahkan perubahan kode # ke URL yang Anda inginkan dan menyimpan widget. Akhirnya menyimpan template.
Anda telah selesai sekarang. Sekarang Anda dan pengunjung Anda dapat melihat ini ikon sosial mengagumkan geser dengan efek Hover di blog blogger Anda.
Post a Comment