Widget ini memiliki Effect Hover dengan tiga tombol jejaring sosial yang umum digunakan seperti Facebook, twitter, G plus dan di tambah ikon RSS. Dengan penampilan yang cukup menarik dan elegan, widget ini akan terlihat rapih apabila dipasang di sidebar blog anda.
Berikut cara pemasangannya
- Masuk ke akun Blogger anda
- Pilih bagian Menu ''Tata Letak''
- Klik ''Tambah Gadget''
- Cari kemudian pilih ''HTML/JavaScript''
- Letakkan kode dibawah pada bagian ''HTML/JavaScript''
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#">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/AVvXsEifvk4s31G7M3srH3JQYHz4sK29fxAds-n4hHlGANqkGuU6PrNmPD4D9WttEMb4MItxEeIHm0NPFlnoULNB4L6KgDyu_s963RZLkwBu43zZT-Wye4c1C2DwlH-R7tpmzp80_uwi3NgQHw/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvk4s31G7M3srH3JQYHz4sK29fxAds-n4hHlGANqkGuU6PrNmPD4D9WttEMb4MItxEeIHm0NPFlnoULNB4L6KgDyu_s963RZLkwBu43zZT-Wye4c1C2DwlH-R7tpmzp80_uwi3NgQHw/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignny3MKVjXudZwtnfzzdM5sLJHoCDaAcwQr9n7Igb4tFM6spoYLV6JXt5ri-kGFpAYcdYbwba05-lisqZ-OGX_72mEvsukL8ZsUDuiOgoPpyI-dYXNDcDZ-k2MyipSvz2FIzvIy2Siw/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignny3MKVjXudZwtnfzzdM5sLJHoCDaAcwQr9n7Igb4tFM6spoYLV6JXt5ri-kGFpAYcdYbwba05-lisqZ-OGX_72mEvsukL8ZsUDuiOgoPpyI-dYXNDcDZ-k2MyipSvz2FIzvIy2Siw/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9i8ZeDD5zJ-vPPMtDrgjwCZoKaQ-wdFLey2ArwUpY4qyjIRnHX2LcbAlVEtdW8s50Iq2LmDaOcUeRT7CqVov3yGh3NU9b15DYDZzBPmP0Z1fgc-ziYltMl8dpuF_lYkR1mR66eO6rg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9i8ZeDD5zJ-vPPMtDrgjwCZoKaQ-wdFLey2ArwUpY4qyjIRnHX2LcbAlVEtdW8s50Iq2LmDaOcUeRT7CqVov3yGh3NU9b15DYDZzBPmP0Z1fgc-ziYltMl8dpuF_lYkR1mR66eO6rg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsnNhEO0xHbQSLRXMLK9G7ZachrFxGzN__Zp92nk6cU20ApuKJSJxpvwslDdNY5D9GdhU_Tgrqftw_MYd6dKwU86uiT-Qe9hdVF7QgkhAXsnVEDJEUDawrNvbTr58pN4LLt6_jeQpq1Q/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsnNhEO0xHbQSLRXMLK9G7ZachrFxGzN__Zp92nk6cU20ApuKJSJxpvwslDdNY5D9GdhU_Tgrqftw_MYd6dKwU86uiT-Qe9hdVF7QgkhAXsnVEDJEUDawrNvbTr58pN4LLt6_jeQpq1Q/s1600/twitter.png) no-repeat 0 0}
</style>
Sumber : agustechnologies.blogspot.com
0 komentar:
Posting Komentar