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/AVvXsEhgAJiQ1h2esrGIqzpIceNpUFTjaMfPDTFS0peEFTf546XiqkCAWEj6pG4z1mPqtnaGIK9cLfnXXlXjYqwk_MnJDfkxQKX1qo4gqSWweKzdG7HxtBImTx4weZM_PmOYtLSDS-0-YxFjuQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgAJiQ1h2esrGIqzpIceNpUFTjaMfPDTFS0peEFTf546XiqkCAWEj6pG4z1mPqtnaGIK9cLfnXXlXjYqwk_MnJDfkxQKX1qo4gqSWweKzdG7HxtBImTx4weZM_PmOYtLSDS-0-YxFjuQ/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdiF31AFGfkdSPcavUBj8bd4QRcNxvdeQ986C3uk_Gte_I-dwgF7uipV3wU5yREhvNYFc2HKakH9JGVx3maRD61H-BUYtKfYT99UnZ1BY7D8ZNDeVrlttzEc7gaCcvNxqtCKV0s6PEmA/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdiF31AFGfkdSPcavUBj8bd4QRcNxvdeQ986C3uk_Gte_I-dwgF7uipV3wU5yREhvNYFc2HKakH9JGVx3maRD61H-BUYtKfYT99UnZ1BY7D8ZNDeVrlttzEc7gaCcvNxqtCKV0s6PEmA/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCy3KX8TPwKfjOwEAT2005EPkZxZUFK_IasMhI9dbxR_S0u0QTcibxxemfnbZ8N7OhkeHjiPuhzddAjyCGiDalKGo6LXePjs6dMb0gI6yrfBqOd_yWVOr7vJKcyCXAJ7wHks8hzN_gw/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCy3KX8TPwKfjOwEAT2005EPkZxZUFK_IasMhI9dbxR_S0u0QTcibxxemfnbZ8N7OhkeHjiPuhzddAjyCGiDalKGo6LXePjs6dMb0gI6yrfBqOd_yWVOr7vJKcyCXAJ7wHks8hzN_gw/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKKYbFSBM4LfHSBVkOPpKSoQeCCnRrI6ds7LlpfrPWrbkv8amsHjFjI0bH0xeWVH7Fp0GJsK5YXXkffOfIdNwo62fPpF_BGIk7W1-0Y22Y6Z3_AcunIk2zHm8je-DWOloXNRWa5uqLvw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKKYbFSBM4LfHSBVkOPpKSoQeCCnRrI6ds7LlpfrPWrbkv8amsHjFjI0bH0xeWVH7Fp0GJsK5YXXkffOfIdNwo62fPpF_BGIk7W1-0Y22Y6Z3_AcunIk2zHm8je-DWOloXNRWa5uqLvw/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.
iya bro....
ReplyDeletetp kya nya agak berat y sob?
ReplyDeletekunjungan balik y mas dan slm kenal
enggak bro ringan kok, oke bro
Deletewah widgetnya keren,,,ane rasa widget sosial media gni yg keren
ReplyDeletecomebacknya mas
iya bro, thank kunjungannya.
DeleteKeren sob.. patut dicoba nih.. ditungga kunbal nya sob
ReplyDeleteiya bro, oke ane menuju tkp bro...
Deletekeren gan.. tapi.. blog saya sudah ada ikon sosial nya :(
ReplyDeletekan bisa diganti bro.
Deletewah pengen pasang nih tapi CSS ane udah rada berat :(
ReplyDeletehttp://primacheat311.blogspot.com/
ringanin lh bro...
DeleteKeren sob.. patut dicoba nih.
ReplyDeleteditunggu kunbalnya ya sob!