Tampilan Social Subscription Button Sliding Effect Dengan CSS3

Semakin maraknya tampilan blog dengan menggunakan fitur fitur CSS,maka untuk itu pada kesempatan ini saya akan coba berikan tutorial tentang Membuat tampilan button sliding Effect Dengan CSS,bagi sobat yang penasaran silahkan lihat demonya.

Bagi sobat yang mau mencobanya silahkan ikuti tutorialnya.

1.  Kode Snippet 

q:before,q:after{content:''}
ol,ul{list-style-position:outside;padding-left:.95em}
li{list-style-type:disc}ol li{list-style-type:decimal}
.pbt_share-links{font-size:.8em;width:215px;z-index:1;}.pbt_share-links>
.heading{display:inline-block;min-width:105px;text-align:center;color:#000}.pbt_share-links>
ul{margin-bottom:29px}.pbt_share-links>
ul>
li{display:inline-block;overflow:hidden;margin-left:5px; padding:0px;}.pbt_share-links .share-link{display:inline-block;width:20px;height:20px;line-height:20px;text-align:left;background:#606060 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCSdg8WA8BMsOeIdYYxGzzbetndJ8alSPZLJkyLyCJIKAbUumbbethRerc8xYQfnDdNrX_v70VDf-9osd_kU_su0pE4HsQQl02o7NJJx0Y2Za1fvbRqoY8qC0UNO_j3IvAwKSBZOZ4TBJ/s1600/social-sprite.png") scroll 0 0 no-repeat;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-transition:none .3s ease-out;-moz-transition:none .3s ease-out;-ms-transition:none .3s ease-out;-o-transition:none .3s ease-out;transition:none .3s ease-out;-webkit-transition-property:min-width,background-color;-moz-transition-property:min-width,background-color;-ms-transition-property:min-width,background-color;-o-transition-property:min-width,background-color;transition-property:min-width,background-color;min-width:0;color:#fff}.pbt_share-links .gplus{background-position:0 0}.pbt_share-links .gplus:hover{min-width:111px;background-color:#dd4b39}.pbt_share-links a.twitter{background-position:0 -20px}.pbt_share-links a.twitter:hover{min-width:83px;background-color:#419ad9}.pbt_share-links a.facebook{background-position:0 -40px}.pbt_share-links a.facebook:hover{min-width:94px;background-color:#3b5998}.pbt_share-links a.email{background-position:0 -60px}.pbt_share-links a.email:hover{min-width:77px;background-color:#5fc355}.pbt_share-links .share-link>
span{display:inline-block;width:300px;padding-left:23px;color:#fff}.pbt_share-links .gplus>
span>
div{position:relative;top:2px;right:-2px}.page_title{margin:5px 0 0 0}

 

2. Pilih menu Template > Edit HTML

3. Cari kode ]]></b:skin> dan letakan kode snippetnya yang tadi  di atas kode ]]></b:skin>

Setelah penempatan kode di atas selesai kemudian

* Kembali ke menu dan pilih Tata Letak 

* Add Gadget > HTML/Javascript

* Letakan kode di bawah pada bagian kolom konten

<div class="pbt_share-links">
  <ul>
    <li>
      <span class="share-link gplus" title="LABSTRIKE on Google Plus">
        <span>
          GOOGLE + 
          <g:plusone size="small" annotation="none"
          href="Web URL">
          </g:plusone>
        </span>
      </span>
    </li>
    <li>
      <a class="share-link twitter"
      href="http://twitter.com/Username"
      title="LABSTRIKE on Twitter">
        <span>
          TWITTER
        </span>
      </a>
    </li>
    <li>
      <a class="share-link facebook"
      href="http://www.facebook.com/Username"
      title="LABSTRIKE on Facebook">
        <span>
          FACEBOOK
        </span>
      </a>
    </li>
    <li>
      <a class="share-link email"
      href="mailto:Your Email ID" title="Receive LABSTRIKE Updates via Email">
        <span>
          EMAIL
        </span>
      </a>
    </li>
  </ul>
</div>
<!-- .pbt_share-links -->
<script type="text/javascript">
   
  var po = document.createElement('script');
   
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
</script>

Keterangan :
Untuk tulisan yang berwarna merah silahkan ganti dengan URL blog sobat.
Untuk yang berwarna hijau ganti dengan nama account sobat.
Untuk yang berwarna pink ganti dengan alamat email sobat.

4. Setelah semuanya beres tinggal save dan lihat hasilnya.


Selamat Mencoba.............