14 December 2013

animasi tombol sosmed

animasi tombol sosmed




LIVE DEMO


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

berkomentarlah sesuka anda
===>no link aktiv<===
NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar