Posted by Aak
Aak-share.com Updated at: 10:33:00 AM

Cara Membuat Tombol Animasi Twitter

No comments:
Tombol Animasi Twitter ~ Sosial media Twitter bisa kita pasangkan di Blog dengan berbagai tampilan seperti 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 memiliki 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 :



Buka Editor Template, kemudian Anda cari kode ]]></b:skin> lalu pasangkan kode 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 kode </head> copy kode 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 kode </body>, kemudian salin kode 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 kode diatas maka lewati langkah tersebut

Masih Pada kode </body> , salin kode dibawah ini dan pastekan diatasnya atau dibawah kode 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 bisa 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 kode warna biru dengan username twitter Anda.

Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments