MBEJI'Z EVIL: ANIMATION SOCIAL SHARE SPRAYING

10 Mar 2013

ANIMATION SOCIAL SHARE SPRAYING

04.19 | Diposting oleh Unknown | Edit Entri

Selamat akhir pekan sobat Blogger, setelah kita membahas tentang pembuatan 4 in 1 Cool Sosial Share, kali ini saya akan membagi kepada sobat Blogger tentang pembuatan Widget Sosial Share dengan efek animasi trik ini saya berinama Animation Sosial Share Spraying, untuk freviewnya kurang lebih seperti ini :

Menarik Bukan, Untuk tutor kali ini saya tidak menampilkan versi demonya namun trik ini udah saya coba and 100% Work . 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 code dibawah ini

6. Klik Save

code untuk di copy kan :

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCq1j1-fwiZ-XcM0c76GP8jPdclMc448N_m5OCkYzZTZhXjVV1TOYAe_4-7RpdZPuSB3nqp1DGbcAswwAqWzaP9gHXm9SWcZwlpbUAcbVxM7_ENOxlfmdB6EmO06VHJc07xETU3UYn4U8/s1600/1x1juice.png" /></a><div id="KT-circle-mod"><div id="KT-container-circle"><a id="KT-fb" class="KT-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tbJXIcak7oUV4sf3CuHkh5F1OI38Epsd77GThAvsXUKeS3y5sOwSZ5rn43Unts1mAMl1oKBSXJ-W2bxnxSX9RCCCx6wBBGZPi2cqeuHN1vgGV8xz1iRxY401_4NUc18SOrMpbeBjlGG9/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/adi cute lonelyboyz" rel="nofollow" target="_blank"></a><a id="KT-tw" class="KT-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tbJXIcak7oUV4sf3CuHkh5F1OI38Epsd77GThAvsXUKeS3y5sOwSZ5rn43Unts1mAMl1oKBSXJ-W2bxnxSX9RCCCx6wBBGZPi2cqeuHN1vgGV8xz1iRxY401_4NUc18SOrMpbeBjlGG9/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -52px 0" href="http://twitter.com/poetra.beji" rel="nofollow" target="_blank"></a><a id="KT-gplus" class="KT-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tbJXIcak7oUV4sf3CuHkh5F1OI38Epsd77GThAvsXUKeS3y5sOwSZ5rn43Unts1mAMl1oKBSXJ-W2bxnxSX9RCCCx6wBBGZPi2cqeuHN1vgGV8xz1iRxY401_4NUc18SOrMpbeBjlGG9/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tbJXIcak7oUV4sf3CuHkh5F1OI38Epsd77GThAvsXUKeS3y5sOwSZ5rn43Unts1mAMl1oKBSXJ-W2bxnxSX9RCCCx6wBBGZPi2cqeuHN1vgGV8xz1iRxY401_4NUc18SOrMpbeBjlGG9/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/blogspot/blogging" rel="nofollow" target="_blank"></a><a id="KT-mail" class="KT-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tbJXIcak7oUV4sf3CuHkh5F1OI38Epsd77GThAvsXUKeS3y5sOwSZ5rn43Unts1mAMl1oKBSXJ-W2bxnxSX9RCCCx6wBBGZPi2cqeuHN1vgGV8xz1iRxY401_4NUc18SOrMpbeBjlGG9/s1600/%5Bwww.joens-tutorial.blogspot.com_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=blogging&loc=en_US" rel="nofollow" target="_blank"></a><a id="KT-base-button"><span class="plus">+</span></a></div></div><a href="http://mbeiji.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

0 komentar:

Posting Komentar

anda sopan ,kami segan, Thank's for u coment

Langganan: Posting Komentar (Atom)