Animation Sosial Share Spraying

Selamat akhir pekan sobat Blogger, setelah kita membahas tentang pembuatan 4 in 1 Cool Sosial Share, kali ini Kolom Tutorial™ akan membagi kepada sobat Blogger tentang pembuatan Widget Sosial Share dengan efek animasi trik ini ane berinama Animation Sosial Share Spraying, untuk freviewnya kurang lebih seperti ini :
Menarik Bukan, Untuk tutor kali ini Kolom Tutorial™ tidak menampilkan versi demonya namun trik ini udah ane coba and 100% Work ( Di Blog Kolom Tutorial™ ). Baiklah sob, daripada basa-basi langsung aja ke TKP.

Berikut cara pemasangannya :
1. Login ke akun Blogger sobat
2. Klik Edit Tata Letak
3. Klik Tambahkan Gadget
4. Klik HTML/JavaScript
5. Kopipaste Koding dibawah ini
6. Klik Save
Kode Untuk Dipasang Silakan Di Kopas
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><style type="text/css">#KT-circle-mod {
  bottom:0 !important;
  left:5px;
  position:fixed;
}

#KT-container-circle {
  position:relative;
  height:100px;
  width:100px;
}

#KT-base-button {
  background:-moz-linear-gradient(center top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0 #6D0019;
  background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);
  background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);
  background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);
  background:linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);
  border:4px solid #fff;
  text-decoration:none;
  z-index:9999;
  cursor:pointer;
  border-radius:50px 50px 50px 50px;
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
  color:#fff;
  font:68px Arial;
  height:80px;
  left:0;
  padding:0;
  position:absolute;
  text-align:center;
  top:0;
  width:80px;
}

.KT-btn {
  position:absolute;
  height:50px;
  width:50px;
  border-radius:25px;
  top:15px;
  left:15px;
  -webkit-transition:all 250ms;
  -moz-transition:all 250ms;
  -o-transition:all 250ms;
  -ms-transition:all 250ms;
  transition:all 250ms;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

#KT-fb.open {
  top:-125px;
  left:25px;
}

#KT-fb.open.clicked {
  top:-135px;
  left:15px;
}

#KT-tw.open {
  top:-105px;
  left:80px;
}

#KT-gplus.open {
  top:-75px;
  left:125px;
}

#KT-rss.open {
  top:-30px;
  left:160px;
}

#KT-mail.open {
  left:175px;
  top:25px;
}

.plus {
  -moz-user-select:none;
  -moz-transition:all 200ms ease-in 0s;
  -webkit-transition:all 200ms ease-in;
  -o-transition:all 200ms ease-in;
}

.rot {
  -moz-transform:rotate(137deg);
  -o-transform:rotate(137deg);
  -webkit-transform:rotate(137deg);
  transform:rotate(137deg);
}

</style><script type="text/javascript">var delay=40,delayTime;
  $(function() {
  btns=$(".KT-btn");
  $("#KT-base-button").toggle(function() {
  $("span.plus").addClass("rot");
  btns.each(function(a) {
  var b=$(this);
  delayTime=a*delay;
  window.setTimeout(function() {
  b.addClass("open");
}

,delayTime);
}

);
}

,
function() {
  $("span.plus").removeClass("rot");
  $($(btns).get().reverse()).each(function(a) {
  var b=$(this);
  delayTime=a*delay;
  window.setTimeout(function() {
  b.removeClass("open");
}

,delayTime);
}

);
}

);
}

);
  </script><a href="http://joens-tutorial.blogspot.com" style="position:absolute;
  z-index:-11"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a><div id="KT-circle-mod"><div id="KT-container-circle"><a id="KT-fb" class="KT-btn" style="background:url(http://2.bp.blogspot.com/-BAK-gxb5MBw/USBlvVQWMeI/AAAAAAAABQs/kFwjp0q57dw/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/joens.tutorial" rel="nofollow" target="_blank"></a><a id="KT-tw" class="KT-btn" style="background:url(http://2.bp.blogspot.com/-BAK-gxb5MBw/USBlvVQWMeI/AAAAAAAABQs/kFwjp0q57dw/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -52px 0" href="http://twitter.com/alexjoen" rel="nofollow" target="_blank"></a><a id="KT-gplus" class="KT-btn" style="background:url(http://2.bp.blogspot.com/-BAK-gxb5MBw/USBlvVQWMeI/AAAAAAAABQs/kFwjp0q57dw/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -157px 0" href="https://plus.google.com/108597184913188482016" rel="nofollow" target="_blank"></a><a id="KT-rss" class="KT-btn" style="background:url(http://2.bp.blogspot.com/-BAK-gxb5MBw/USBlvVQWMeI/AAAAAAAABQs/kFwjp0q57dw/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/blogspot/kolomtutorial" rel="nofollow" target="_blank"></a><a id="KT-mail" class="KT-btn" style="background:url(http://2.bp.blogspot.com/-BAK-gxb5MBw/USBlvVQWMeI/AAAAAAAABQs/kFwjp0q57dw/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=kolomtutorial&loc=en_US" rel="nofollow" target="_blank"></a><a id="KT-base-button"><span class="plus">+</span></a></div></div><a href="http://joens-tutorial.blogspot.com" rel="dofollow"></a>

Note :
Silakan ganti text yang di blok dengan akun terkait milik sobat Blogger.
Ahir kata jika tertarik dengan artikel ini silakan kasih komentar, salam Blogger.

Berlangganan update artikel terbaru via email:

16 Responses to "Animation Sosial Share Spraying"

  1. wah, terima kasih ats informasi tutorialnya.
    ngomng2 bagi2 award sobat. sore ini saya beritahukan bahwa blog sobat masuk daftar award saya yaitu blog loading cepat 2013.

    ReplyDelete
    Replies
    1. Widih yang bener ni mas, thank atas kunjungannya,

      Delete
  2. .: widget yg sangat menarik kawan, bisa buat alternatif layout kalo sudah bosan...^-^

    ReplyDelete
    Replies
    1. Thank gan atas kunjungannya, silakan dicoba mas.

      Delete
  3. Animasi yang sangat mantap gan
    terima kasih infonya
    salam sukses

    ReplyDelete
  4. Waahhh..sip banget nih bang Alex tutor widgetnya,trims sdh abng share ya..hahahyyy

    ReplyDelete
  5. Keren infonya dan sangat bermanfaat, kunjungan balik ya...
    http://www.bmatindas.com

    ReplyDelete
    Replies
    1. Ok gan, terimakasih atas kunjungannya........

      Delete
  6. makasih infonya gan, makin maju yo ^o^

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel