Home » » Tampilan Social Subscription Button Sliding Effect Dengan CSS3

Tampilan Social Subscription Button Sliding Effect Dengan CSS3

Pada hari ini taukahbahwa.blogspot.com akan menyajikan berita tentang Tampilan Social Subscription Button Sliding Effect Dengan CSS3. Semoga dengan artikel Tampilan Social Subscription Button Sliding Effect Dengan CSS3 akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

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("http://3.bp.blogspot.com/-zaqWsbe-urM/T98vzus0MRI/AAAAAAAABXc/ReEf8PqB0Hk/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.............

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul Tampilan Social Subscription Button Sliding Effect Dengan CSS3. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/tampilan-social-subscription-button.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar