baru , cara memasang animasi back to top button rocket yg keren abiss
back to top ini beda dari pada yg lain,,,jika sobat penasaran, cekidot
back to top ini beda dari pada yg lain,,,jika sobat penasaran, cekidot
>>> Buka blog anda >>> edit HTML
>>> cari kode ]]></b:skin> atau </style>
>>> copas kode dibawah tepat diatasnya
/* Back to Top KiseFXrocket */
<style type="text/css" scoped="scoped">
#scrolltop{display:none}
#KiseFXrocket{position:fixed;bottom:50px;z-index:7;display:none;overflow: inherit;!important;width:26px;height:48px;right:25px;background:url(http://4.bp.blogspot.com/-Big_8fGwmGI/VaGT3LKkq8I/AAAAAAAAATc/R9ZwxOWC17M/s1600/kisefx.rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#KiseFXrocket i{display:block;margin-top:48px;height:14px;background:url(http://4.bp.blogspot.com/-Big_8fGwmGI/VaGT3LKkq8I/AAAAAAAAATc/R9ZwxOWC17M/s1600/kisefx.rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#KiseFXrocket:hover{background-position:50% -62px}
#KiseFXrocket:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}
#KiseFXrocket.showrocket{visibility:visible;opacity:1;border:none;box-shadow: 0 0px 0px rgba(0,0,0,0.0);}
#KiseFXrocket.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#KiseFXrocket.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}</style>
>>> trus cari kode ini </body>
>>> copas kode dibawah tepat diatas
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#KiseFXrocket").slideUp(500):jQuery("#KiseFXrocket").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("KiseFXrocket"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.css("right", 10)}),jQuery("#KiseFXrocket").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]></script>
>>> terakhir cari kode ini </head>
>>> copas kode dibawah tepat diatasnya
<a href="javascript:void(0);" id="KiseFXrocket" class="showrocket"></a>
>>> terakhir silahkan simpan / save
>>> S E L A M A T M E N C O B A <<<
0 komentar
Click here for komentar