Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.
Pada Artikel kali ini kita akan membahas Cara Membuat Tombol Back to Top, Postingan ini masih berhubungan dengan Artikel Widget.
Cara membuat atau memasang tombol back to top/ kembali ke halaman atas - Kali ini saya akan membagikan cara membuat atau memasang tombol back to top pada halaman blog dengan menggunakan efek roket meluncur, sebelum kita memasangnya mungkin ada baiknya klo kita mengetahui apa sih fungsi dari tombol ini? Fungsi dari tombol back to top ini adalah membantu pengunjung untuk memudahkan ketika akan kembali ke halaman atas dengan menekan tombol rocket yang ada pada bagian kanan bawah blog sobat. Oke langsung saja, ikuti langkah-langkah di bawah ini.
1. Buka blogger sobat
2. Silahkan masuk ke Template >> edit HTML
3. Cari kode ]]></b:skin> atau </style> dan letakkan kode di bawah ini tepat di atasnya.
2. Salin dan taruh kode berikut di atas kode </body>
3. Kemudian simpan dan lihat hasilnya.
Demikian artikel kali ini mengenai cara memasang tombol back to top di blog dengan efek roket meluncur. Selamat mencoba :)
Pada Artikel kali ini kita akan membahas Cara Membuat Tombol Back to Top, Postingan ini masih berhubungan dengan Artikel Widget.
Cara Membuat Tombol Back to Top
Advertisement
Cara membuat atau memasang tombol back to top
Note : Sebelum melakukan editing silahkan backup terlebih dahulu template blog sobat untuk berjaga-jaga apabila terjadi error saat editing.1. Buka blogger sobat
2. Silahkan masuk ke Template >> edit HTML
3. Cari kode ]]></b:skin> atau </style> dan letakkan kode di bawah ini tepat di atasnya.
/* Back to Top Roket meluncur */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(https://4.bp.blogspot.com/-H-IW2YPRnq0/V1J_Ze8SSSI/AAAAAAAAAXU/SPMTG9eWaIIKvOhIGpYf5rJGUK42ZkxswCLcB/s1600/jdks.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(https://4.bp.blogspot.com/-H-IW2YPRnq0/V1J_Ze8SSSI/AAAAAAAAAXU/SPMTG9eWaIIKvOhIGpYf5rJGUK42ZkxswCLcB/s1600/jdks.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)}
2. Salin dan taruh kode berikut di atas kode </body>
<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a> <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>
3. Kemudian simpan dan lihat hasilnya.
Demikian artikel kali ini mengenai cara memasang tombol back to top di blog dengan efek roket meluncur. Selamat mencoba :)
EmoticonEmoticon