Ikon Sosial Media Dengan Efek Sliding

Ikon Sosial Media Dengan Efek Sliding

Posted by Robi Armansyah

Ikon Sosial Media Dengan Efek Sliding
Ikon Sosial Media Dengan Efek Sliding keren pada blogspot. Tombol ikon ini memiliki efek keren dengan sliding.
Tombol ikon ini dibuat dengan CSS tanpa menggunakan coding JavaScript dan CSS berikut juga sudah di kompres.
Demo langsung Tombol ikon sosial media tersebut dapat sobat lihat langsung diakhir artikel ini.

Tutorial Membuat Ikon Sosial Dengan Efek Sliding
Buka dasboard blog ▬►Tatak Letak ▬►Add gadget HTML
Seperti pada gambar dibawah
Masukan kode berikut pada add gadget tsb.
Ikon Sosial Media Efek Hover Dengan Sliding
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="URLFacebook" target="_blank">Facebook</a></li>
<li><a class="twitter" href="URLTwitter" target="_blank">Twitter</a></li>
<li><a class="google-p" href="URLGooglePlus" target="_blank">Google plus</a></li>
<li><a class="rss" href="URLRssBlog" 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/AVvXsEhy0El85loxKZrQ9plC9nsZTOGnNViRN2wJXbMoIfsNw7GdZXx8KTwU2gRJHeF2nxNYiIugsuRY_d26tkqtDOYXb_e6pHRQOW63i7BmdJiJSFqVrWWE8nm0MlM7axn_BmUt7IngDSckNw/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0El85loxKZrQ9plC9nsZTOGnNViRN2wJXbMoIfsNw7GdZXx8KTwU2gRJHeF2nxNYiIugsuRY_d26tkqtDOYXb_e6pHRQOW63i7BmdJiJSFqVrWWE8nm0MlM7axn_BmUt7IngDSckNw/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2w7nmEPxSKyEQKnCIKbpSMeLoXyM_ni75vErKEX2Y0dHhu3YyIf4Zji2YUMCALEYU1RFB5nbx-ZwwwU1jVq1k-QunvLPRk8FTYx4lBM4r1qil4GX0zazAoUos-T_nJbsw37GWjAo2Dg/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2w7nmEPxSKyEQKnCIKbpSMeLoXyM_ni75vErKEX2Y0dHhu3YyIf4Zji2YUMCALEYU1RFB5nbx-ZwwwU1jVq1k-QunvLPRk8FTYx4lBM4r1qil4GX0zazAoUos-T_nJbsw37GWjAo2Dg/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip63RtSEPBO-5wmgD0GgKu9LAKDdrl-BHBoEKK2XQpdPPcJo-DP0JkTeeaJTrnLlSafJO-EnDBSsDx5yzow49zWGOGDZ0rjLMsaRuAiUlyURQCZ1aOCPt0g-mJypG5pFosLCYjDqSZUA/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip63RtSEPBO-5wmgD0GgKu9LAKDdrl-BHBoEKK2XQpdPPcJo-DP0JkTeeaJTrnLlSafJO-EnDBSsDx5yzow49zWGOGDZ0rjLMsaRuAiUlyURQCZ1aOCPt0g-mJypG5pFosLCYjDqSZUA/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9jTWe_WLQ1OeC39kz7r0QhnxZcVIhs16dhtlEJ9GxfjkzaY5I8y-JzpU1qjA0WBGIMlIMg5rs2cCz0Nu5YrrksUQjOqqSONM3EM2HlcnirQc39uijF0hc-rGFF-bvdaOoo4g-mcqXQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9jTWe_WLQ1OeC39kz7r0QhnxZcVIhs16dhtlEJ9GxfjkzaY5I8y-JzpU1qjA0WBGIMlIMg5rs2cCz0Nu5YrrksUQjOqqSONM3EM2HlcnirQc39uijF0hc-rGFF-bvdaOoo4g-mcqXQ/s1600/twitter.png) no-repeat 0 0}
</style>
Jangan lupa mengganti
URLFacebook ▬►Digatnti dengan URL Facebook
URLTwitter ▬►Digatnti dengan URL Twitter
URLGooglePlus ▬►Digatnti dengan URL GooglePlus
URLRssBlog  ▬►Digatnti dengan URL RssBlog

Live Demo




Ditulis Oleh : Robby Armansyah

DMCA.com Protection StatusAnda baru saja membaca artikel dengan judul Ikon Sosial Media Dengan Efek Sliding. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.
✚
Subscribe to:Post Comments (Atom)