Cara Memasang Tombol Back To Top Roket Di Blogger

Hello Kali Ini Hekthatman Akan Memberikan Tutorial Untuk Anda Yaitu, Cara Memasang Tobol Back To Top Design Roket Di Blog Anda, Bagi Yang Belum Tahu Apa Itu Back To Top , Saya Akan Menjelaskannya Untuk Anda, Widget Back To Top Adalah Sebuat Widget Untuk Memudahkan Anda Dalam Dalam Melihat Artikel Blog Yang Terlalu Panjang Dan Anda Capek Scrool Mouse Anda , Widget Back To Top Adalah Solusinya.

Cara Memasang Tombol Back To Top Di Blogger


Blogger === > Template === > Edit Template
Kemudian , Kamu Cari Kode CSS Kamu Dulu Yaitu ]]></b:skin> Atau Juga Bisa </style>
Kamu Copy Kode Yang Di Bawah Ini
Dan Kamu Pastekan Tepat Di Atas ]]></b:skin> Atau Juga Bisa </style>

/* Back to Top Roket  */
#scrolltop{display:none} #rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/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)} #rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/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} #rocketmeluncur:hover{background-position:50% -62px} #rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1} #rocketmeluncur.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} #rocketmeluncur.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)}

Kemudian Kamu Cari Kode Lagi Yaitu Kode Javascript Yaitu </body>
Kamu Copy Kode Yang Di Bawah Ini
Dan Kamu Pastekan Tepat Di Atas </body>

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>

Kamu Copy Lagi Kode Yang Di Bawah Ini
Dan Kamu Pastekan Juga Tepat Di Atas </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),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.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").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>

Dan Kamu Simpan Template

Demo Tombol Back To Top Rocket

Oke Sekian Dan See You Next Time.


EmoticonEmoticon