animasi tombol sosmed

moonroemoort

widget

14 December 2013

Belum ada komentar

LIVE DEMO

• 
  
  Feed
  
  
• 
  
  Facebook
  
  
• 
  
  Twitter
  
  
• 
  
  GPlus
  
  
• 
  
  Youtube
  
  
• 
  
  flickr
  
  
• 
  
  Last.fm
  
  
• 
  
  
  
  Instagram
  
  
• 
  
  Skype
  
  
• 
  
  
  
  

di tengah tengah rasa malas ini saya akan share animasi tombol sosmed kira-kira seperti di atas lah penampakannya ...
ikuti cara pemasangannya

• masuk dashboard
• klik TATA LETAK > add gadget
• pilih HTML/javascript
• masukan kode di bawah ini

<style>

#interwebz-wrapper {

display:inline-block;

border-top:none;

padding:5px 0;

}

.interwebz {

list-style:none;

margin:0;

padding:10px 0;

width:auto;

overflow:hidden;

float:left;

}

.interwebz li {

float:left;

margin-right:10px;

border:none;

}

.interwebz li:last-child{margin:0}

/* Flickr */

.icon-flickr a, .icon-instagram a, .icon-facebook a, .icon-gplus a, .icon-lastfm a, .icon-feed a, .icon-skype a, .icon-twitter a, .icon-youtube a {

float:left;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDaASth3_D4YOFogSJUxDW4z1avaXNve4Xal-YRFBRi-B2Bll1XXPau5_QXY73m1jFhD6UMpExXZqlM73f99ejHGrpZxI3Dggp2G1-gbNpRLP10jB1goJwVObtp4JbPi_B0QIGzXzrk4/s0/social-media.png) no-repeat left bottom;

text-indent:-9999px;

width:32px;

height:32px;

-o-transition: all 0.3s;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

}

.icon-flickr a:hover, .icon-instagram a:hover, .icon-facebook a:hover, .icon-gplus a:hover, .icon-lastfm a:hover, .icon-feed a:hover, .icon-skype a:hover, .icon-twitter a:hover, .icon-youtube a:hover {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDaASth3_D4YOFogSJUxDW4z1avaXNve4Xal-YRFBRi-B2Bll1XXPau5_QXY73m1jFhD6UMpExXZqlM73f99ejHGrpZxI3Dggp2G1-gbNpRLP10jB1goJwVObtp4JbPi_B0QIGzXzrk4/s0/social-media.png) no-repeat left top;

-o-transition: all 0.3s;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

}

/* Instagram */

.icon-instagram, .icon-instagram a {

background-position:-32px bottom;

}

.icon-instagram:hover, .icon-instagram a:hover {

background-position:-32px top;

}

/* Facebook */

.icon-facebook, .icon-facebook a {

background-position:-64px bottom;

}

.icon-facebook:hover, .icon-facebook a:hover {

background-position:-64px top;

}

/* Google+ */

.icon-gplus, .icon-gplus a {

background-position:-96px bottom;

}

.icon-gplus:hover, .icon-gplus a:hover {

background-position:-96px top;

}

/* Last.fm */

.icon-lastfm, .icon-lastfm a {

background-position:-128px bottom;

}

.icon-lastfm:hover, .icon-lastfm a:hover {

background-position:-128px top;

}

/* RSS Feed */

.icon-feed, .icon-feed a {

background-position:-160px bottom;

}

.icon-feed:hover, .icon-feed a:hover {

background-position:-160px top;

}

/* Skype */

.icon-skype, .icon-skype a {

background-position:-192px bottom;

}

.icon-skype:hover, .icon-skype a:hover {

background-position:-192px top;

}

/* Twitter */

.icon-twitter, .icon-twitter a {

background-position:-224px bottom;

}

.icon-twitter:hover, .icon-twitter a:hover {

background-position:-224px top;

}

/* Youtube */

.icon-youtube, .icon-youtube a {

background-position:-256px bottom;

}

.icon-youtube:hover, .icon-youtube a:hover {

background-position:-256px top;

}

</style>

<div id="interwebz-wrapper">

<!-- Start - Social Links -->

<ul class="interwebz">

<li class="icon-feed">

<a href="http://galauness-demo.blogspot.gr/feeds/posts/default">Feed</a>

</li>

<li class="icon-facebook">

<a href="http://facebook.com/">Facebook</a>

</li>

<li class="icon-twitter">

<a href="http://twitter.com/">Twitter</a>

</li>

<li class="icon-gplus">

<a href="https://plus.google.com/">GPlus</a>

</li>

<li class="icon-youtube">

<a href="http://youtube.com/">Youtube</a>

</li>

<li class="icon-flickr">

<a href="http://flickr.com/">flickr</a>

</li>

<li class="icon-lastfm">

<a href="http://last.fm/">Last.fm</a>

</li>

<li class="icon-instagram">

<a href="http://instagr.am/">Instagram</a>

</li>

<li class="icon-skype">

<a href="http://www.skype.com/">Skype</a>

</li>

<li>

<a href="http://www.bloggertipsandtricks.net/2012/09/animated-social-and-subscribe-buttons.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvIxSnA94dgKUCdRnmEjyl-A6g4iT7LbSMhEMPneRq-h_0j0qmN1mfkYuM63k8NilAaVZwyyUjEf_QshLToOjk06wELp6oVrAhrD3cwZ9Xg4WLxRNwXySmhDLbsiaPBNh1goadsR0BsHE/s1600/bloggertipsandtricks.png" alt="http://www.bloggertipsandtricks.net" /></a>

</li>

</ul>

<!-- End - Social Links -->

</div>

•  klik simpan
• dan selamat menikmaati