Cara Menciptakan Tombol Animasi Twitter

Tombol Animasi Twitter Sosial media Twitter dapat kita pasangkan di Blog dengan aneka macam tampilan menyerupai membuat burung Twitter terbang di Blog, memasang Widget Followers Twitter di Blog dan Membuat Widget Follow Twitter animasi Flash.

Pada Tombol sosial media Twitter berikut ini mempunyai fitur Animasi dan hover. Ketika cursor berapa diatas icon Twitter maka akan muncul effect hover yang akan mengubah semua background pada halaman.
Bagi Anda yang tertarik berikut ini langkah-langkahnya :

Demo   CODE

Buka Editor Template, kemudian Anda cari kode ]]></b:skin> kemudian pasangkan isyarat dibawah ini diatasnya .

/* Animasi Twitter*/
.wrap {
  width: 80px;
  margin: 0 auto;
}

h1 {
  margin: 80px 0px 50px 0px;
  text-align: center;
  color: #FFF;
  font: 700 16px Montserrat;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.pop {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: #0199DA;
  position: relative;
  top: -187px;
  border-radius: 50%;
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.fa-twitter {
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  z-index: 5000;
  color: #FFF;
  padding: 15px 15px 12px 15px;
}

.fa-twitter:hover {
  color: #0199DA;
}

.bg {
  background: #FFF;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.bg-switch {
  background: transparent;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.scale {
  -moz-transform: scale(100);
  -o-transform: scale(100);
  -ms-transform: scale(100);
  -webkit-transform: scale(100);
  transform: scale(100);
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

.shrink {
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

Selanjutnya Anda cari isyarat </head> copy isyarat dibawah ini dan pasangkan diatasnya

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"/>

Kemudian Anda cari isyarat </body>, kemudian salin isyarat dibawah ini dan pastekan diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />

Catatan : Apabila pada Template Anda sudah terinstall isyarat diatas maka lewati langkah tersebut

Masih Pada isyarat </body> , salin isyarat dibawah ini dan pastekan diatasnya atau dibawah isyarat diatas.

<script type="text/javascript">
$('a').on('mouseenter', function (e) {
    $('a').find('i').removeClass('bg-switch');
    $('.pop').removeClass('shrink');
    $('a').find('i').addClass('bg');
    $('.pop').addClass('scale');
}).on('mouseleave', function () {
    $('a').find('i').removeClass('bg');
    $('.pop').removeClass('grow');
    $('a').find('i').addClass('bg-switch');
    $('.pop').addClass('shrink');
});
</script>

Pada pemasangan HTML, Anda dapat memasangnya dimana saja sesuai yanga Anda kehendaki.

<div class="wrap">
<a href="http://twitter.com/User Name Twitter"><i class="fa fa-twitter fa-3x bg-switch"></i></a>
</div>
<div class="pop scale shrink">
</div>

Catatan : Silahkan isikan pada isyarat warna biru dengan username twitter Anda.

Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/